PNG Transparency in Internet Explorer

code.gifI teach a Multimedia class at Plymouth State University. This week we were discussing the pros and cons on the use of PNGs. I mentioned that Internet Explorer versions 6 and lower fail to render the transparency of a PNG properly, placing white background in the transparency’s place. I also took the time to plug Firefox, mentioning that Firefox does it right!

Well, one of my students, Brendan Emery sent along this fix for PNG transparency in Internet Explorer, thus refuting my biggest con on PNG use! (honestly, I can’t think of any other cons)

[This is] a JavaScript-based PNG fix for Internet Explorer 5.5 and 6 on Windows. The fix allows IE to properly render PNG alpha transparency. […]

Why only versions 5.5 & 6? Because Windows IE versions prior to 5.5 do not support the filter which fixes the PNG problem, and version 7 (not yet released at the time of writing in January 2006) is reported to have fixed the issue entirely.

The code can be used either by a one-time copy-and-paste or as an include file. The entire thing is completely ignored by all other browsers – in fact it is treated as an HTML comment – thanks to IE’s conditional comments. This solution is therefore light, portable and non-invasive to other browsers.