Encountering a compatibility issue on IE8 (surprise, surprise) and here's what it looks like:
The current setup involves products as list items with image and details:
<li class="product ships-free on-sale">stuff</li>
With corresponding 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 setup functions in Chrome and Firefox but not in IE8. Have yet to test IE9. For the code, refer to www.calleynye.com/exteriorsolutions.
Attempting to resolve without adding extra elements. Aware that pseudo elements may not render in earlier versions of IE, but appearance should not be distorted.
Appreciate any assistance!