Tuesday, August 12th, 2008

mtjs_iepnghandler: more PNG support for IE 6

Category: IE

Micah Tischler wasn’t happy with the variety of approaches for allowing transparent PNG support in IE 6, so he continued his work with mtjs_iepnghandler which intelligently provides true background repeat functionality for transparent PNGs as well as full positioning.

In this script image tags are supported, both with and without a blank spacer GIF, and background image PNGs may be positioned, as well as repeated, even if they’re smaller than the content element they’re in. Also, the repeat functionality is implemented to provide true repeat functionality, rather than just stretching everything willy-nilly.

mtjs_iepnghandler.js traverses the DOM, making adjustments where it runs into PNGs. The methods used depend on whether a PNG is in use as an image, or as a background, and, if it’s a background, whether it is repeated or positioned. The script also takes into account the dimensions of the PNG to make intelligent decisions about how to implement repeats. It should be noted that, like mtjs_csswalker_iepnghandler.js, the script just sits quietly and does nothing on browsers other than IE5-6.

Micah finishes up his post comparing his solution to the others out there.

Posted by Dion Almaer at 5:47 am
6 Comments

+++--
3.4 rating from 31 votes

6 Comments »

Comments feed TrackBack URI

Just tried it as I had a need for a png fix this morning.
It might work, but I’ll be damned if I can spare the time to figure out the 6 different scripts that need to be included, proper load orders, where functions should be called etc. The site says things like “follow the first 3 steps from this script, then do this, then make sure you do everything else for this script”.

This might be promising, but implementation really needs to be simplified.

Comment by jlbruno — August 12, 2008

I have a project coming up where I may need to support transparent png’s on ie6 (and just ignoring ie6 isn’t an option for me). Of all the other methods out there, how does this stack up? What method have you found to be the best when dealing with transparent png’s in ie6?

Comment by tdupree — August 12, 2008

@jlbruno,
I’ve added a stand-alone version after seeing your comment. This one just needs to be src-ed into the page and then called from onload (or some time around then). You can find it at:
http://www.micahtischler.com/#mtjs_iepnghandler_solo.js

Comment by mtischler — August 12, 2008

@tdupree – I usually use a combination of AlphaImageLoaders, PNG 8, and IE6 specific HTML elements. I’ve tried some automated methods (iepngfix, etc) but none have accomplished what I’ve needed. The iepnghandler method has promise because of the potential to repeat (rather than scale) background images. … I did a blog post about it ( http://willpeavy.net/ ), and a test case ( http://willpeavy.net/iepng/ ).

Comment by WillPeavy — August 13, 2008

Question is.. why care?… I serve png’s for IE6 as they are and don’t mind they look weird… it doesn’t make big difference to IE6 user as it’s just IE6 user ;-)
IE6 is on the way out and within 1-2 years will be gone.. let’s just make sites accessible for it and don’t mind such quirks.

Comment by medikoo — August 13, 2008

@medikoo – if I left the alpha channel the way it appears by default in IE6 I would have a lot of upset clients and managers…

Comment by WillPeavy — August 13, 2008

Leave a comment

You must be logged in to post a comment.