PNG Transparency and IE

I recently worked on a design that uses PNG images with transparency. The images are overlayed using z-index, and they both involve transparency, plus a nifty drop shadow. The images looked perfect in Firefox and Safari, but, alas, were jacked in Internet Explorer 6.

To fix this irritating problem, you need to add a few css hacks (important parts in bold):

in your stylesheet:

#layer1 {
position:absolute;
left:20px;
top:20px;
z-Index:1;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/lens30.png');
}

#layer3 {
position:absolute;
left:110px;
top:80px;
z-Index:2;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/lens3.png');
}

and, in your html page:

<div id="layer1">
<img src="images/lens30.png" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)" alt="" />
</div>

<div id="layer3">
<img src="images/lens3.png" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)" alt="" />
</div>

and now, the drop shadows and transparency look as they should in all 3 browsers.

Comments

[Menudoman]

Funny thing is that I was going to do the very same thing on my BLOG. Mostly Winblows and Cisco stuff. I like the picture of Steve Ballmer, that shit is funny

[furiouschango]

developers developers developers developers

[Steven Ballmer]

Nice blog. Could you please slow down the posts though? I'm having a hard time keeping up.

[Larry Ellison]

Glad to see you are writing soooooo much content, maybe it is because you don't have a GRAND database that can take a hard hittin much like your ma.... never mind.

OPEN SOURCE IS FOR SUCKERS WITH NO MONEY!!!!!!!!!!!!

~~VIVA PEOPLE SOFT!!!~~