MNteractive.com

Last month YouTube announced that they’ll no longer be supporting IE6. This is welcome news to anyone that has to still deal with IE6. Not sure if that is enough ammo to convince your team to abandon IE6 yet, but it’s a step closer.

As IE6 fades into the background, I tend to use transparent PNGs more and more often. A common use is as part of a rollover sprite using a positioned anchor tag to manipulate various jQuery visual interactions.

Of course, I then finally remember to take a peak in IE6 and cringe and realize I’m pushing the limits and usually slap in some conditional comments and feed up a GIF for IE6.

jQuery has certainly made dealing with IE6 easier, as a lot of the built in UI widgets and plugins make the effort to deal with the IE6 discrepancies.

There are also several PNG-fix plugins for jQuery to deal with IE6: pngFix, iepngfix, ifxPng, etc. These are nice, but I hadn’t found one that dealt with background positioning when using transparent pngs.

Today, by accident, I came across a solution. Angus Turnbull who runs TwinHelix.com has had a great PNG Fix script file that goes way back which I’ve used numerous times. Somehow I missed the news but about a year ago, Angus came out with Version 2 of his great script. The big update includes the ability to position a transparent PNG file in IE, which is what is needed to make the CSS sprite rollovers.

GREAT! One catch…IE still has an issue with positing the PNG when called in the CSS via a hover state. Sometimes it works, and sometimes it doesn’t. Angus then suggested a solution that seems obvious in hindsight: add a simple addClass call via jQuery to swap the CSS class on hover. For whatever reason, IE6 is cool with that and moves the position of the PNG image for you.

In summary:

• Grab the IEPNGFix files from TwinHelix
• Add the ‘ img, div, input { behavior: url(“iepngfix.htc”) }’ line to your CSS file. (Read the included instructions for specifics.)
• For the hover effect, provided you are already using jQuery elsewhere on your site (and these days, who isn’t?) add a function to swap out a class name for IE6:
  
if ($.browser.msie && $.browser.version == 6 ) {
$(".yourLinkClass").hover(function() {
$(this).addClass("fixingIEhover");
}, function() {
$(this).removeClass("fixingIEhover");
});
};
• Add one extra declaration in your CSS file (likely your separate IE6.css file) to position the background for the new class you created ‘fixingIEhover’.

I have to imagine someone more observant already came across this type of solution. And maybe there’s already a jQuery plugin that DOES do all of the above. If there is, let me know! Otherwise, I hope this helps those of us left that still have to tolerate IE6 for a tad bit longer to make it just a bit easier.