The newest transparency-ping-fix kid on the block is from Uninteractive Labs and manages to make the simplest, smallest and most versatile png fix for IE so far.
For thos unfamiliar with the transparency woes of web designers, a png file allows to a very sophisticated transparent overlay technique that other file types simply don’t allow - jpeg has no transparency at all and GIF has a very crude on/off style transparency. PNGs alpha transparency allows background elements to be seen beneath your image. Its all very lovely and allows web designers greater flexibility when designing their slick, web 2.0 style sites. As usual however, the main stumbling block is Internet Explorer 6 and below (and those users who insist on using them). IE6 doesn’t display PNGs with alpha transparency correctly - instead of the transparency you get a dull grey/blue block around your image which looks awful. Now there is the ability build right into windows to show png files correctly in IE - but for some reason, Microsoft in their infinite wisdom turned this off in their pre IE7 web browsers.
So, how to fix png transparency in Internet Explorer?
Traditionally, in order to recall the alpha functionality in IE6, the designer would have to write a separate style sheet targeting IE6 (yes, firefox, navigator, opera, konquerer, camino…etc. all managed to include alpha functionality into their systems), and each background png file would be individually targeted and have Microsoft’s AlphaImageLoader string applied, and some cute javascript applied to img tags for inline images. Then a range of JavaScript fixes were made available by independent developers. These would allow alpha transparency to be applied almost automatically, so long as the designer jumped through a couple of low-and-wide hoops first and target them correctly, they applied the necessary transparency elements with out too much pain. These js files were certainly useful and to some extent satisfied a desperate need for a simpler method of applying the png fix. The best of these methods I found was iepngfix.htc by Twin Helix but I often found this method a little flakey and it would occasionally miss apply elements or not apply them at all - other times it would work a treat. I founfd also, that when using pngs for buttons or links, I would have to apply cursor:pointer; to the link’s CSS. So another fix method was still desired.
So enter Uninteractive Labs. Their fix is the smallest I’ve come across, weighing in at just 2kb. It doesn’t require any additional CSS entry nor any additional coding other than to call the script. So a conditional comment to call the js file when IE6 or below is present and bob’s your uncle!
You can download the javascript file and its partnering black.gif from the Uninteractive Labs website.