Almost seven years after its release, it's rather amazing that developers still need to support IE6. According to w3schools, IE6 currently accounts for roughly 30% of web traffic, so support it we must -- at least for now.

The limitations of IE6 are well known, but one of the more irritating of its failures is the lack of support for PNG transparency. Of course, it does support GIF transparency... but GIFs don't support alpha transparency, only giving you completely transparent or completely opaque states for any given pixel. Hence those ugly halo effects around poorly created GIFs or when a transparent GIF is moved onto a different background color than it was originally matted for. PNGs give you alpha transparency, allowing smooth edges and variations in transparency, opening up far greater design options.

Fortunately there is a way to overcome most aspects of this limitation of IE6, allowing the use of PNGs. Better yet, it requires no changes to your HTML and involves adding only a single line to your CSS. The version I currently use was created by twinhelix.com and can be downloaded here. Alternately, there is also a jquery version that appears to work in much the same manner.

Below is an example from a site we recently worked on. The design called for a 3D bar graph to float on top of an auto-rotating slideshow. On the left, you can see what the bar graph image looks like in IE6 without the PNG fix. On the right is how it looks in modern browers... as well as how it looks in IE6 once the fix is in place. To see how the PNG interacts with the slideshow, please see the live site at www.usip.org/building/.

The fix does not create full PNG support, so it's not perfect. Most notably, transparent PNGs can be used as background images, but they cannot be tiled (i.e., repeat-x or repeat-y). In other cases you may need to specify a height or width other than 'auto' to get a particular image to display correctly. However, for the most part it works beautifully and allows the use of far more elegant design solutions in IE6 at very little cost.