PNG Transparency in IE6

Oh, not again!! Another browser compatability issue caused by IE6!! I have been working on my new project – Helper Balloon for about 2 weeks now, and everything goes smoothly except for the IE6 support of PNG’s transparency, which took me nearly the whole day to fix it. [generic] The Portable Network Graphic (PNG) image format was developed by the World Wide Web Consortium as a better GIF than GIF many years ago, in response to Unisys’s plans to exercise its intellectual-property rights over the format. Though Internet Explorer and Netscape have long included support for PNGs, the format hasn’t been a runaway success, largely because IE doesn’t always handle PNG graphics correctly. In particular, in IE PNG graphics support transparency only with a 256-color palette. When you use transparent PNG images with greater color depths in the normal way, with standard HTML and scripting, the transparent parts will be opaque, but if you view them in some other browsers, such as Mozilla, they will appear fine. PNG images Web developers have complained for years about the problems. There’s even a petition that urges Microsoft to complete full support for PNG. The petition enumerates some of the format’s benefits: PNG graphics are smaller than GIFs, they can use 48-bit color while GIFs are limited to 8-bit color, and they are not encumbered by intellectual-property disputes. And PNG supports true transparency of images, through an alpha channel. Microsoft admits the problem and offers a workaround that’s not entirely satisfactory. [/generic] After googling for a while, I found a few solutions, but not everything was working as expected. There was one solved my problem.

[tab]

This was what I needed to do in Javascript.

var span = document.createElement( "span" );
var image = document.createElement( "img" );
image.src = "image.png";

span.style.position = "absolute";
span.style.width = "56px";
span.style.height = "32px";
span.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"' sizingMethod='image')";

image.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
image.width = "56px";
image.height = "32px";
span.appendChild( image );

This code should work on both IE6 and Firefox.