In addition to Solution 1, that correctly explains why you are seeing this issue in IE7.
IE8 provides
partial support for
:before and :after pseudo-elements[
^]. This explains why you are only experiencing this issue in IE versions < 8.
This css feature was introduced as part of
CSS2.1[
^].
To replicate this functionality in IE7, try using the
Moderizr [
^] library.
After including the library to your page, the below snippet should replicate you css in IE7.
if (!Modernizr.generatedcontent)
{
$('.arrow').prepend('<img src="../images/Popup.gif" />');
}
... hope it helps.