My Tip O'the Month: IE PNG fix

Being the month of Irish fanfare, and my "mego" status, I thought it might behoove me to share a "tip o'the month". This tip is one I employed recently. You may be aware of this one already, but for those of you who are not, you may find it quite useful. As seen in this first screen shot, the beauty of the PNG image transparency is tainted in IE 5.5 and 6.0:



Googling IE PNG FIX gives one lots of results (common issue, eh?!). I employed the following one and found it worked beautifully. It is available to everyone under a Free Software license. You are welcome to check out the link yourself (below) and get the entire scoop, but the basics get you from my first screenshot to this one:



This tip adds a IE5.5+ "behavior" through your css without any changes to your HTML document itself. You basically add a file then reference the behavior file in your css, which employs a transparent gif. Pretty easy-peasy and will gets rid of one of those killer IE headaches we all experience. Reference the site below to troubleshoot any sticky spots. I had no trouble, so the fix remained very basic for me.

I saved a “iepngfix.htc” and “blank.gif” in my website folder (the script is tiny for those worried about download time). Then I added this reference in my css:

img, a, div, span {
    behavior: url('/iepngfix.htc');
}

The htc file references the “blank.gif” so you may need to change the path in the htc to make it work correctly (just open in a text editor).

And then my PNGs appeared beautiful in IE. The one thing I did notice is that the images rendered a bit slower, but it was worth it to make them appear as they should... purdy!

For additional details, troubleshooting tips and to download your iepngix.htc and blank.gif, visit:

http://www.twinhelix.com/css/iepngfix/demo/