Resolving transparent PNG bug in Internet Explorer 6 and below

Internet Explorer 6 and below has bug in displaying transparent PNG files correctly. To resolve this issue, there is a great fix made by Angus Turnbull. You can find the details in his website.

Here are some steps (I copy and paste it from his website) you should do to implement this fix :

First, download and extract the files in the website above. Here is the direct link. The file name is iepngfix.zip .

 

Second, copy and paste iepngfix.htc and blank.gif to your website folder.

 

Third, change the relative URL of the blank.gif image in iepngfix.htc from

if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';

to the relative URL of your blank.gif image (for example : if you place it under a folder named : images ), then you should change the code to this :

if (typeof blankImg == 'undefined') var blankImg = '/images/blank.gif';

 

Fourth, edit your CSS where you place your PNG files for example from this:

<style type="text/css"> 
.myPNGBackground {
     background-image:url('/images/mybackground.png'); }   
</style>

to this (I assume my iepngfix.htc file is on my website root folder). Add the behavior properties with the value url of your iepngfix.htc file.

<style type="text/css"> 
.myPNGBackground {
     background-image:url('/images/mybackground.png');
     behavior: url('/iepngfix.htc') }
</style>

IMO this is the easiest way to apply the PNG fix. All the credit should go to Angus Turnbull. Great job.