Enabling Transparent PNG’s in IE 6

Internet Explorer 7 is here at last! After abandoning their browser project for five long years, Microsoft has stepped up to the plate and delivered lucky #7. And, and….

Well, it still basically sucks.

While their CSS standards compliance still lags behind (more or less) every other browser out there, one nice thing they did fix was transparency in PNG’s. Before IE 7, IE would basically render transparent portions of PNG’s as stark-raving white, which in all likelihood isn’t what you were going for. As a result, transparency in PNG’s never really took off, and we were limited to transparent GIF’s with their measly 256 colors. There were some hacks out there to get IE to render transparent PNG’s correctly, but they were generally a pain.

Although IE 7 fixes this problem, you’re still going to be dealing with IE 6 for a long, long, long time. I just ran into a great fix, however.

It’s simple. Drop the iepngfix.htc file from the above site into your CSS folder, and drop in some CSS like so:

img { behavior: url(iepngfix.htc); }

And that’s it. It even works for CSS background images.

My only regret is I wish I’d known about this a lot sooner. Kudos to Angus Turnbull for a great IE 6 PNG hack.