PNG issues with Internet Explorer

While designing a layout which involved a lot of PNG files, I figured out that transparent PNG in IE appears with a light blue ugly background.

This is how it appears in IE:

Solution:
The Javascript code: pngfix.js as specified here.

Pros & Cons

Pros:

Ignored as a comment in other browsers - it’s only run by Windows IE.
Works with (X)HTML Strict & Transitional Doctypes
Does not break W3C validation
Lightweight and very easily deployed
Works with existing in-line or external CSS rules based on class or ID selectors
Works with old-style img align=”left” or align=”right” attributes
Runs after any existing Body Onload code
Works with imagemaps and input images using a special version

Cons:

Doesn’t work in IE versions earlier than 5.5 - the AlphaImageLoader filter wasn’t introduced until version 5.5. There is no cure for earlier versions.
Requires JavaScript to be enabled - the estimations for how many people choose not to use JS vary wildly. See note [1]
CSS backround PNGs not supported - experimentation revealed I could traverse the Stylesheets collection and use the AlphaImageLoader trick to replace all background-image attributes containing PNGs, but then background-repeat would not work, and anchors placed over non-transparent parts of the image were not clickable CSS rules for the PNG images based on the img selector are lost, but this is easily rectified by adding a class selector to your img rule such that img{..} becomes img,.png{..} - then add the attribute class=”png” to each of your PNGs.

However, this issue is visible in IE 5.5 & 6 only but there are a lot of people who are still using them. So, I decided to post the solution here.

Credits:
Bob Osola