Damn IE again, the IE PNG transparency horror

I just finished adding a badge graphic to contain shopping cart information on the Blanket Punk site. Like a proud father I step back and approve of the new graphic image as I view it in my favorite browser, Firefox.

The Problem
And then the horror! IE has done it again or rather not done it. In the image below you see what I am talking about, notice the gray box around the Your Cart Contains image. I created a PNG image with a transparency so that the furry leopard background could show through. How often do you get to say furry leopard background…

Luckily the fix was on a Google away, after reading through a couple of other solutions I came across a very simple solution from TwinHelix. Now as you can see in the image below, we have glorious furry leopard showing through and no scary gray box in IE.

The Fix
Super simple - just upload two files, one JS and one GIF to your server. Add one line of CSS and your done.

Download IE PNG Fix v1.0 RC4 [ZIP 16k]

Add this line of CSS:

behavior: url(/js/iepngfix.htc);

And another example:

<style> img {
behavior: url(/js/iepngfix.htc);
} </style>

• Works with IE5.5 and higher
• CSS embedded background images
• Small file size around 2k

Full details and many thanks go to the author, Angus of Twinhelix. Download the original files and any updates here.

Found another great project focused on a clean approach to fixing IE problems, check it out here - the IE7 project.