Discussing: Cross-Browser Variable Opacity with PNG: A Real Solution: A List Apart
August 18 2005
The problem occurred when I tried to create a rollovers effect on a Suckerfish dropdown menu for my revised TAI layout. The sub-menu pops up over a section that had a background image. The sub-menu background was supposed to show a screened version of that background (like looking through a transluscent screen.) It worked fine in Firefox and Opera but I couldn’t get it to work in IE. And I was using an alternate image on the li hovers to simulate the transparency. The problem occurred in IE because it positions the background image from the origin of the li instead of from the origin of the containing div. I wasn’t able to work around this. Instead, I turned to utilizing PNG images for the background, because PNG supports transparency. This came in useful for a problem I was having, Discussing: Cross-Browser Variable Opacity with PNG: A Real Solution: A List Apart. IE requires a hack in order to display PNG files with transparency. I modified the solution in the article to avoid javascript and simply put the necessary attributes in the inline stylesheet.
Comments ()