I am using a background image to display as a button. The button shows up well in all versions of firefox, chrome, opera etc. However, the image fails to render itself in IE8. Only the image is not being shown, some of the other class styling gets applied such as width, height etc.
Even more confounding is that in another page(though a different class and style sheet), an image of similar proportions gets displayed in similar usage. The image format is JPG.
I'm copy-pasting the valid style attributes for both cases as shown by firebug below.
None of the below buttons are displayed. button classes are applied as class="cart-button login", class="cart-button update", class="cart-button checkout" and class="cart-button continue" and are inside some divs.
.cart-button{
height: 28px;
cursor: pointer;
border: none;
float: left;
}
.cart-button:hover{
background-position: 0 -28px;
}
.login{
width: 58px;
background:url(/../../templates/animalcare/i/login.jpg)no-repeat;
margin:0 0 20px 0;
clear: both;
}
.update{
width: 63px;
background:url(/../../templates/animalcare/i/update.jpg)no-repeat;
margin:0 0 20px 15px;
float: left;
}
.checkout{
width: 77px;
background:url(/../../templates/animalcare/i/checkout.jpg)no-repeat;
float:right;
margin:0 25px 30px 10px;
}
.continue{
width: 132px;
background:url(/../../templates/animalcare/i/continue.jpg)no-repeat;
float:right;
margin:0 0 30px 0px;
}
The below is the only image button that gets displayed. It is located inside a table. It is in a different style sheet - hence the path difference.
.add-to-cart{
width:102px;
height:28px;
float:left;
background:url(i/add_to_cart.jpg) no-repeat;
cursor:pointer;
border:none;
margin:10px 0 5px 0;
}
.add-to-cart:hover{
background-position:0 -28px;
}
