Color "transparent" not working

css internet-explorer css-content
Poru picture Poru · May 7, 2010 · Viewed 43k times · Source

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

Juan picture Juan · Oct 20, 2011

if what you're trying to do is show the image as background and not showing the text use

font-size:0px

it works!

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Support for "border-radius" in IE

Does anyone know if/when Internet Explorer will support the "border-radius" CSS attribute?

Read More
Apply style ONLY on IE

Here is my block of CSS: .actual-form table { padding: 5px 0 15px 15px; margin: 0 0 30px 0; display: block; width: 100%; background: #f9f9f9; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; } I only want IE 7, 8, and 9 to "see" …

Read More