I’ve been looking into opacity in CSS. All of my initial testing was done in Firefox and worked as expected. Using opacity in CSS is simple enough, accepting values between 1.0 (completely visible) and 0.0 (invisible). As an added bonus it also works in Safari and Opera.
Then I ran into Internet Explorer (IE). IE’s CSS uses filter instead of opacity, and the expected values are different. The filter opacity values range from 100 (completely visible) to 0 (invisible). This turns out to be easy enough to deal with. Here’s an example that sets the opacity to 50%, it works in IE (filter) and others (opacity):
.change_opacity {
opacity: 0.5;
filter: alpha(opacity = 50);
}
But simply setting the filter/opacity value in IE isn’t enough. Turns out that IE requires an element to be positioned in order for filter/opacity to work. If your element doesn’t have a position you can work around this by adding ‘zoom: 1‘ to your CSS. There are other hacks to deal with this, zoom was the one I picked and it seems to work well enough.
In JavaScript you can find out if an element in IE has a position component by checking element.currentStyle.hasLayout. If hasLayout is false then the element has no CSS positioning.
If you want to learn more about this issue here is a reading list to get your started:
UPDATE: Fri 1 Sep 2006 @ 12:45pm Michael correctly pointed out that IE doesn’t use a % for opacity, so I’ve removed it.