CSS Buttons working in Firefox but not IE8

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
12 years ago
Hi there,

I am putting together a template for a new store that I want to do, however, I have run into a bit of a problem.

On the Recently added products page I am struggling because the "Add to Cart" and "Details" button do not work. I havent changed any of the back end code, just the CSS.

So my CSS looks like this.....


.productlistproductdetailbutton, .productgridproductdetailbutton 
{
    background: url(images/DETAILS.png) no-repeat top left;
    border: 0 none;
    float:right;
    margin-left: 5px;
    cursor: pointer;
    display: block;
    width: 63px;
    height: 27px;
    text-indent: -9999px;
}

.productlistaddtocartbutton, .productgridaddtocartbutton
 {
display: block;
height: 27px;
width: 92px;
background: url('images/ADD.png') no-repeat top left;
border: 0 none; 
float:right;
cursor: pointer;
}


Because the background buttons have the text on them I have removed the words in the localisation. This didnt work.
Put the words back into the localisation and then set text-indent: -9999px but still not working. As I say it works great in Firefox but IE8 the buttons wont work.

Has anyone got any suggestions?

I have a mooch aroound google and cant find anything.
David
0
12 years ago
Just a shot in the dark and I haven't time to check as I am off to work (2 -10), just check your speech marks around the background images line of code.




.productlistproductdetailbutton, .productgridproductdetailbutton 
{
    background: url(images/DETAILS.png) no-repeat top left;
    border: 0 none;
    float:right;
    margin-left: 5px;
    cursor: pointer;
    display: block;
    width: 63px;
    height: 27px;
    text-indent: -9999px;
}

.productlistaddtocartbutton, .productgridaddtocartbutton
 {
display: block;
height: 27px;
width: 92px;
background: url('images/ADD.png') no-repeat top left;
border: 0 none; 
float:right;
cursor: pointer;
}


/quote]

HTH
Peter
0
12 years ago
Sorry, when I say the buttons are working I meant to say that you can click them in Firefox. But not in IE8. Its weird. The images show fine - but you was right I was consistent in my coding.
David
0
12 years ago
Had to resort to removing the text from the Image and giving the the "Add to Cart" back to the button. For some IE8 isnt treating the lack of button text the same as Firefox. It means I loose some styling, but it 100% more important that the customer can buy the products :o)
David
0
12 years ago
BerryMan wrote:
Just a shot in the dark and I haven't time to check as I am off to work (2 -10), just check your speech marks around the background images line of code.




.productlistproductdetailbutton, .productgridproductdetailbutton 
{
    background: url(images/DETAILS.png) no-repeat top left;
    border: 0 none;
    float:right;
    margin-left: 5px;
    cursor: pointer;
    display: block;
    width: 63px;
    height: 27px;
    text-indent: -9999px;
}

.productlistaddtocartbutton, .productgridaddtocartbutton
 {
display: block;
height: 27px;
width: 92px;
background: url('images/ADD.png') no-repeat top left;
border: 0 none; 
float:right;
cursor: pointer;
}


/quote]

HTH
Peter



This the code for my buttons and they work fine in firefox and ie8/9


{
  background: url(images/grey_button_bg.gif) no-repeat 25% 50% #333;
  border: 1px solid #333;
  color: #FFF;
  height: 20px;
  padding: 0 5px 0 5px;
  width: auto;
  overflow: visible;
  cursor:pointer;
}
Please VOTE if this helps you.

Regards

Garrie

Current Nop v2.65
Previous Nop v1.90
0
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.