IE - Color transparent not working

Question

Hello,

I have a problem with the IE (what else?):

I generate content with CSS which has also a background-image. I looks like that:

#nav ul li:after {
    content: "--";
    position: relative;
    z-index: 99;
    background: transparent url(image.png);
    color: transparent;
}

The text color is in non-IE-browsers transparent, but in all IE browsers (IE6-IE8) it's black and you could see it. How could I make the text transparent/unvisible?

I tried already: visibility - opacity - filter - text-indent ... But none did his job right, either it disappears (with it background which I need) or the attribute doesn't apply.

Answer 1

IE doesn't support li:after consistently. Which IE are you talking about? IE6? IE7? Both?

Answer 2

I see you're using a PNG as your background image. Normally, if you're using IE 6, there is a fix for PNG transparency (http://www.twinhelix.com/css/iepngfix/). Even so, this will not work with background-images. So if you're using IE 6, there really isn't a fix.

Answer 3

I think no versions of IE support color: transparent Perhaps you could try to do it with jQuery or something like that.

Answer 4

I get it: With the right padding and a zero font-size!