Internet Explorer 6 : PNG Fix

While learning about CSS and tableless design using 'Divs' - I stumbled upon a problem. It took me quite a while to find the solution because I really didn't know what issue I was trying to resolve (I know, in order to resolve a problem you must first know what the problem is - yes, this is basic, I know.) I decided to use .png files.

Not sure what a .png is? Read on...
"For the Web, PNG really has three main advantages over GIF: alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive display). PNG also compresses better than GIF in almost every case, but the difference is generally only around 5% to 25%, not a large enough factor to encourage folks to switch on that basis alone. One GIF feature that PNG does not try to reproduce is multiple-image support, especially animations; PNG was and is intended to be a single-image format only." source: www.libpng.org.

Anyway, I was testing my new images using IE7, Firefox and Opera - everything looked great. Then I remembered the dreaded IE6! I booted up a computer still running the piece of junk browser and noticed that my .png files (which should have had a transparent background) looked like crap (this is not a technical term) but I had no idea as to why they looked like crap! I struggled. I searched (but I didn't know what I was searching for and I almost decided to go back to .jpg's and .gif's but eventually I found this page - The PNG problem in Windows Internet Explorer. Not only did I find the solution (a bit of JavaScript code to make things better) but a description of the problem, with examples. Needless to say that after a week or so of frustration I was nearly airborne when I realized just how easy it was to make up for one of the many shortcomings of Internet Explorer 6!