You are likely living in civilized society with Firefox, Safari, Chrome or Internet Explorer 7/8 installed in your computers. Yet, some are still in the dark with the older Microsoft browsers named Internet Explorer 6 (IE6) or, worse, older versions. One of the most painful facts about IE6 is that it does not natively support PNG alpha-channel transparency.

Microsoft probably thought that GIF transparency — where each pixel is either fully transparent or a solid color, not anything between — should be enough for the world. But it’s not! Just compare three “JavaScriptly” logos in transparent GIF, transparent PNG and semi-transparent PNG images on a web page, you’ll recognize the differences.

• View Non-Fixed PNG Demo

Transparent PNG vs Transparent GIF

(1) The font edge of GIF logo has side-effect which can be only fixed by choosing “color matte” exactly like background color when exporting the image (but we can do nothing optimal if the background has multi-colors like a picture.)

(2) Only PNG can be semi-transparent like the last logo, GIF is out of luck.

Is IE6 dead yet?

So, transparent PNG is obviously a better choice except for the mentioned problem: IE6, which is still being used by at least one tenth of net citizens at the time I’m writing this blog post, does not like it. Well, if you care about that 10% (poor) audiences, here are some of the best hacks to fix the issue.

TwinHelix

TwinHelix’s fix is one of the most popular used solutions for IE6 PNG alpha-transparency issue. This uses CSS “behaviors” to execute fixing scripts which basically apply Microsoft’s proprietary filter called the AlphaImageLoader to the PNG images on the web page.

• View TwinHelix Fix Demo
• Download TwinHelix Demo Code

Installation

1. Download the fix here.
2. Extract, copy and paste iepngfix.htc and blank.gif into your website directory.
3. Add the following CSS:

   <style type="text/css">
       img, div, a, input { behavior: url(iepngfix.htc) }
   </style>

   You’ll need to include tags or elements you want to apply the fix only. For example, you can apply fix to images only:

   img { behavior: url(iepngfix.htc) }

   or to the logo element only:

   #logo { behavior: url(iepngfix.htc) }

   Notice:

   + Path to .HTC (and the blank GIF file) is relative to the HTML document location, not relative to CSS file.

   + Path to blank GIF can be modified if the file blank.gif is at a sub-directory by opening .HTC file in a text editor and change the blankImg variable like:

   IEPNGFix.blankImg = 'images/blank.gif';

4. A JavaScript add-on is required to support CSS1 background-repeat and background-position. Just include it if needed:

   <script type="text/javascript" src="iepngfix_tilebg.js></script>

SuperSleight

SuperSleight fix comes along with a great article about the issue and resolution. This fix is also to apply the AlphaImageLoader filter to images but it use JavaScript directly, not via CSS behaviors like TwinHelix’s, so that it’s much easier to install.

• View SuperSleight Fix Demo
• Download SuperSleight Demo Code

Installation

1. Download SuperSleight here.
2. Extract, copy and paste supersleight.js and x.gif files into appropriated directories.
3. Link the script file into your document inside conditional comments so that it is delivered to IE6 (or older) only.

   <!--[if lte IE 6]>
       <script type="text/javascript" src="supersleight.js"></script>
   <![endif]-->

4. You can change path to blank GIF file (x.gif) if it’s not at the same directory with the JS file by modifying variable shim at near top of the scripts like:

   var shim = 'images/x.gif';

5. Instead applying the fix to all PNGs, you can limit the script to just one part of the page by passing an ID of an element to:

   supersleight.limitTo();

   before initialization function at bottom of the file:

   supersleight.init();

6. jQuery plugin of SuperSleight can be downloaded from this page.

DD_belatedPNG

The major problem of TwinHelix’s, SuperSleight fixes and various derived solutions is that AlphaImageLoader filter appears not very efficient and it can slowdown a page load significantly if there are many PNG images to be fixed.

In 2008, a new technique to solve the issue was discovered by Drew Diller when he found that alpha-transparent PNG images show up correctly in VML (Vector Markup Language) fill elements.

• View DD_belatedPNG Fix Demo
• Download DD_belatedPNG Demo Code

Installation

1. Download the latest version of DD_belatedPNG here.
2. Extract, copy and paste DD_belatedPNG_x.x.x.js file into website directory
3. Refer to the script file in your document and add another script node to execute the fix inside conditional comments to let it be loaded in IE6 only:

   <!--[if IE 6]>
       <script type="text/javascript" src="DD_belatedPNG.js"></script>
       <script type="text/javascript">  
           DD_belatedPNG.fix('.logo');  
       </script>
   <![endif]-->

4. String argument for DD_belatedPNG.fix can be any valid CSS selector like logo class in above code snippet or a group of CSS selectors like:

   DD_belatedPNG.fix('.class1, .class2, img');

Summary

We’ve gone though why alpha-transparent PNG should be a better choice for web developers/designers and three solutions to force Internet Explorer 6 to render it correctly.

All solutions are based on one of two hacks: AlphaImageLoader filter and VML. SuperSleight looks better than TwinHelix’s but I think DD_belatedPNG appears to be the most elegant way out.