Color "transparent" not working

Question

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.

Which IE version? To clarify, there is a black `--` and that's what you don't want, right? It's not the whole thing that has a black background? — Pekka, May 07 '10 at 16:48

score 42 · Answer 1 · edited Oct 20 '11 at 08:34

42

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

font-size:0px

it works!

edited Oct 20 '11 at 08:34

axel22

32,045
9
125
137

answered Oct 20 '11 at 00:30

Juan

421
4
2

Just wanted to thank you for this simple answer. Was trying to hide unwanted value of a button with no access to underlying code and this worked. – matt Feb 28 '12 at 04:11
OMG this just prevented me from possibly throwing my laptop out the window. Thanks =] – Brade Jul 02 '13 at 18:52
1

This causes accessibility issues and shows a small line of text on some older browsers. See the CSS tricks image replacement gallery for more info. – RobW Feb 25 '14 at 21:57

score 7 · Answer 2 · edited Oct 10 '14 at 17:28

7

what about using line-height

line-height:0;

it worked in my case.

edited Oct 10 '14 at 17:28

RafaSashi

16,483
8
84
94

answered Dec 08 '10 at 07:25

Arsenal Fanatic

71
1
2

score 5 · Accepted Answer · edited Oct 20 '11 at 15:19

5

I get it: With the correct padding and a zero font-size! Set the padding-left value to be one pixel beyond the image width.

edited Oct 20 '11 at 15:19

jball

24,791
9
70
92

answered May 07 '10 at 17:46

Poru

8,254
22
65
89

1

you may want to expand on this answer with more detail. – Jonathan Fingland Feb 03 '11 at 16:05
I don't have the project online but I found this changed CSS: `#nav li:after { content: "."; padding: 5px 0px 3px 0px; color: transparent; background: transparent url(bg-nav.png) no-repeat 0px 0px; position: relative; z-index: 1; }` – Poru Feb 03 '11 at 21:32

score 4 · Answer 4 · answered May 15 '13 at 16:39

4

If this doesn't work in Internet Explorer 8

font-size: 0;

make sure you're using a valid doctype:

<!DOCTYPE html>

answered May 15 '13 at 16:39

Sarah-Jane

153
2
4

score 2 · Answer 5 · edited May 06 '14 at 10:32

2

This should work. If it doesn't add display: block or inline-block

.transparent {
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}

edited May 06 '14 at 10:32

Community

1
1

answered Nov 28 '13 at 20:29

tbela99

21
1

I had set body overflow to auto. This was causing an issue rendering color:transparent for an angular component in chrome. Making it visible again (default overflow setting) solved the issue. – Soggiorno Jan 22 '17 at 18:17

score 1 · Answer 6 · answered May 07 '10 at 16:59

1

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

answered May 07 '10 at 16:59

Venemo

18,515
13
84
125

score 1 · Answer 7 · answered Dec 08 '10 at 00:13

1

I assume you already fixed this, but lately i've used a very large line-height, when text-indent is giving me layout problems, combined with overflow: hidden to hide the text.

answered Dec 08 '10 at 00:13

Mario Estrada

475
1
3
10

score 0 · Answer 8 · answered May 07 '10 at 16:49

0

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

answered May 07 '10 at 16:49

Armstrongest

15,181
13
67
106

score 0 · Answer 9 · answered Sep 08 '15 at 06:00

0

For me color:transparent was not working in IE8, and it was showing text with default color. I used visibility:hidden; for IE8 only as the text was not required to display.

Hope this help in case, if the element is not required to display.

answered Sep 08 '15 at 06:00

Pravin Deshmukh

13
6

score -1 · Answer 10 · answered May 07 '10 at 16:53

-1

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.

answered May 07 '10 at 16:53

Robusto

31,447
8
56
77

If I understand him correctly, he is talking about the `color: transparent` that is not working, not the background. – Pekka May 07 '10 at 16:53
3

@Pekka: Yes, I thought so too, but why have an image on the background if you want said BG to be transparent? Why set the "color" property to transparent as well? That makes no sense. And containers are transparent by default anyway. There are a lot of disconnects here. – Robusto May 07 '10 at 16:56
1

I know this is an old question, but where does it say that the OP is using a transparent PNG? – Blair McMillan Nov 01 '11 at 04:50

Color "transparent" not working

10 Answers10

Linked