developers

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.

Welcome

Hello.

This Log is for keeping track of some web development procedures/tricks/links/solutions I've used, or plan on using. It's pretty much a memory tool for my personal dev junk, but I've made it public in case this stuff is useful to others. Fresh development links on the left, other standard crap on the right.

Have a nominal day! SLUUURP!