Transparent PNGs in IE6

For some unknown reason, a significant amount of people still use Internet Explorer 6 as their browser of choice. Since that’s the case, web developers such as myself have to continue to test our websites in IE6 to make sure they work as desired. The majority of the problems in IE6 caused by CSS can be resolved by using a Global Reset Stylesheet and by building in valid, clean code. However, problems still remain, such as IE6’s inability to support alpha-channel transparency for PNG image files.

There are a number of options for getting PNG transparency to work in IE6:

pngfix.js (http://homepage.ntlworld.com/bobosola/pnghowto.htm) – This is the first “hack” I came across a year or so ago and it’s been the one that I continue to use. It’s a simple JavaScript file that seems to do the job for most regular transparent PNG files in IE6. The biggest downfall I’ve had with it is that it does not support the background-repeat property for tiled backgrounds. Also, on the author’s homepage, he explains how the script hasn’t been updated since 2004 so he suggested to try out the SuperSleight filter.

SuperSleight (http://24ways.org/2007/supersleight-transparent-png-in-ie6) – I’ve also used this before but it’s a bit awkward and clunky since it uses a proprietary filter called AlphaImageLoader. It might be worth looking into if you’re looking for something that has been updated more recently than 2004, but it still does not support the background-repeat property, which is the only reason I would not use the initial pngfix.js.

IE PNG Fix (http://www.twinhelix.com/css/iepngfix/) – This one uses CSS behaviors, which is a custom Microsoft extension to CSS. It apparently also uses the AlphaImageLoader filter that SuperSleight uses. Most importantly, the IEPNGFix v2.0 Alpha version found on the test site apparently now supports the background-repeat property. If that’s the case, then I have found a new PNG fix! I haven’t used it yet but once I do, I’ll update the blog with my observations.

Until Microsoft requires users to update their browsers from IE6, we will always be presented with the problem of PNG transparency. Hopefully, the options above will help!

Comments

One Response to “Transparent PNGs in IE6”

  1. Update: Transparent Background PNGs in IE6 | d0x | web development repository in richmond, virginia on January 6th, 2009 12:20 pm

    […] is an update to a previous post I made about Transparent PNGs in IE6. I finally tried out the “IEPNGFIX v2.0″ which was supposed to be the only solution […]

Leave a Reply