I have implemented a feature that works in firefox and opera, but doesn't work in IE -- it is the css opacity setting. I am overlaying translucent divs over a jpg image. Do I need to use javascript to fix this for IE ?

http://listenlight.net/05 is the page I'm working on.

Thanks. :-)

javascript won't do it i'm afraid, i've never tried an opacity setting in CSS, but if it's not in the official "standard" for CSS (and possibly even if it is) IE probably doesn't implement it.

you could try with medium alpha PNG files? that way, your image files contain the translucency (alpha) information in the pallete (or in each pixel). they could work in modern versions of IE...

if that doesn't work for you (I've never actually tried PNG translucency in browsers), you could always try good old fashioned screendoor transparency? XD
by that method, transparency is just "removing" pixels, the more pixels you remove, the more transparent a picture is ^_-

EDIT: Just a quick follow-up, translucent PNG files DO work (in Opera atleast).. To make a DIV background color transparent, use a small translucent PNG as the (tiled) background image. =)

EDIT (2): And just to follow that up again, translucent PNG's do NOT work in IE (version 6 atleast), maybe they work in IE7, I don't know. It might end up an IE-only screendoor job ^_-

And here's an EG,

http://www.fusiongroups.net/testbed/test.html


It looks ok at high (large) resolutions, at smaller resolutions it's clear that the image is dotted... On my somewhat blurry high-res screen though, you couldn't tell the difference between that and a translucent PNG ^_-

There is a complete article about opacity here:

http://www.quirksmode.org/css/opacity.html

In general, I have quickly browsed through the text and I think you will need the following
Explorer Windows

Explorer Windows requires:
filter: alpha(opacity=50);
Note that an element must have layout for a filter to work.



For further clarification you should go through the complete article.