Question

I’m having a problem with compatibility on IE8 (what else is new?) and it looks like this:

http://screencast.com/t/o6Is0q6EEn

The way the code is set up, and the way I’d prefer to do it if possible, is that the products are a list item, containing the image and product details and they look like

<li class="product ships-free on-sale">stuff</li>

And the CSS:

li.product.ships-free:before {
content: url(../img/ships_free.png);
width: 80px;
height: 66px;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 10000;
}

li.product.on-sale:after {
content: url(../img/on_sale.png);
width: 80px;
height: 66px;
right: 0;
top: 0;
display: block;
position: absolute;
z-index: 10000;
}

This works in Chrome and Firefox, but not IE8. I haven’t checked ie9 yet. For the code, check http://www.calleynye.com/exteriorsolutions.

Ideally, I’d like to figure out a way to fix this without adding extra spans or divs. I know that pseudo elements don’t work in earlier versions of ie, but if they don’t show up at all, I’m ok with that. I just don’t want them to look messed up.

Thanks in advance!

Answer 1

You are inserting the images before and after a list item. Maybe try to insert them using the image it self or the definition lists you have there in the code.