Arise our problem. IE 6. Same old pal who loves to give us headache developing website but we can’t just forget it because number of ie6 users is still significant, at least for my sites.

The problem with ie6 this time is that it cannot display .png transparency properly. For those who don’t know about this problem please see example below.

Original PNG File

IE7

IE6 !!!

As we can see, ie6 image transparency is not really transplant.

IE PNG FIX

The code we’ll use to fix this problem is iepngfix from Twin Helix: IE PNG Fix.

Here’s how we use it:

1. Download iepngfix.zip at original website above.
2. Extract then put iepngfix.htc and blank.gif into any folder you want.
3. Add style into your html or css file

   <!--[if lte IE 6]>
   
   <style type="text/css">
   img, div, input { behavior: url("iepngfix.htc") }
   </style><![endif]-->

Save you files and refresh the browser ie6

IE6 Works!

Note: If iepngfix.htc and blank.gif is not in the same location(folder) you have to open file iepngfix.htc using notepad and change path of “IEPNGFix.blankImg = thisFolder + ‘blank.gif’; <–to absolute path e.g. IEPNGFix.blankImg =’/images/blank.gif’;