Fading PNGs in Internet Explorer 7 and 8

One issue I recently came across was the desire to use PNGs as the background of a tooltip, and to fade the tooltip in and out of view (you can see the functionality here by hovering over 'details' or clicking on 'buy now'). In case you haven't tried this before - IE7 and IE8 generally do not react well to fading PNGs, putting a black background under the portions of the PNG which have alpha transparency - and generally making the element look less than ideal.

Luckily, there is a fairly easy workaround for this situation as long as you are not trying to do too much with the pngs. It will even fix pngs in IE6 for you too (in fact, that is the real purpose of the script). That workaround is the jQuery ifixpng2 plugin, written by Yereth and available here.

All you need to do is install the plugin and use it on the PNG containing objects (images or backgrounds) that you would like to fade. There are two changes you will need to make however:

Line 64 looks like this:

ltie7	: $.browser.msie && $.browser.version < 7

You'll want to change the 7 to a 9 (in hopes that this is fixed for good by IE 9, otherwise you'll need to go back and change it to 10 later).

The other change you need to make is on Line 149, which looks like this:

for (prop in expr) elem.style.setExpression(prop, expr[prop], 'JavaScript');

Internet Explorer 8 doesn't support setExpression, so it will throw an error, unless you add an if statement to keep it from running:

if( $.browser.msie && $.browser.version < 8 ) {
for (prop in expr) elem.style.setExpression(prop, expr[prop], 'JavaScript');
}

That's all there is to it. Happy fading!