Easy Transparent PNG Fix for IE6

As mentioned in my original Redesign, WordPress Powered post I used a lot PNG files for this layout.  PNG files can be found in my header, nav, post and comment sections as well as in my tweet duck.

Why did I choose PNG vs GIF?
GIF files will allow for a transparent background,  but PNG files will allow for transparent backgrounds as well as altered opacity values.

I use a simple black box with a lowered opacity level to around 20% saved as a PNG for the sections mentioned above.  If I were to save it as a GIF I would end up with a shade of grey colored box.

Why care about IE6 and the PNG Issue?
I use Firefox on my personal machine as well as my machine at work(Mac/PC respectively).  I have IE7 installed just to make sure everything looks fine, same with a Safari install on this very machine.  I love Firefox and I’m sure many of you do(especially if you are landing here from WeLoveWP) but the realization is that many people out there are still using IE6*.  A quick search brings up W3Browser Stats and for the month of June 2008 they report:

2008 IE7 IE6 IE5 FX Moz S O
June 27.% 26.5% 0.5% 41.0% 0.5% 2.6% 1.7%

26.5% market share is enough for me to fix the issue since I want everyone who visits to be able to see/experience the site the way I originally intended.

*To view your site in multiple IE versions and you are on a PC make sure to check out Tredosoft they offer a free program that lets you install IE6, IE5.5, IE5.01 and IE4.01.

The Fix
I am using the iepngfix V1.0 that can be downloaded at twinhelix.
In my case, I moved blank.gif and ieongfix.htc to a directory images/iefix on my web host.

Edit your site’s CSS file and include the line:
img{behavior: url(images/iefix/iepngfix.htc)}
Just make sure you use the correct path to where you uploaded the iepngfix.htc file

In your css just call out your class/id’s that are using transparent PNGs, just make sure they are comma seperated:
.tweet,h2, .post, img{behavior: url(images/iefix/iepngfix.htc)}

Lastly if you placed blank.gif in another directory than your HTC file, open the iepngfix.htc file in a text editor and the find the fist uncommented line and fix the path to blank.gif:
if (typeof blankImg == ‘undefined’) var blankImg = ‘blank.gif’;

Note: Version 1 of IE PNG Alpha Fix has some limitations such as not working properly with background set to repeat but there is an Alpha Version 2 that deals with this issue.

05. August 2008 by Gabe Diaz
Categories: Blog | 8 comments