Nextstudio :: Weblog :: Revisiting PNG in IE6

Last modified: Jan 1st 2007, 05:12 | Posted by: TJK | Category: Web browser quirks | Comments(3)

For our quick solution jump to the bottom, otherwise read on.

A quick trip through Google shows many weird and wonderful ways for web developers to coax Microsoft’s Internet Explorer (prior to version 7) into supporting PNG images which include a 24 bit alpha channel. These almost exclusively follow the pattern of Microsoft’s knowledgebase article in using the external AlphaImageLoader to load the image.

Microsoft suggests the following kludge:


<html>
<head></head>
<body bgColor="blue">
<!-- This DIV is the target container for the image.  -->
<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='image.png', sizingMethod='scale');" >
</DIV>
</body>
</html>

It’s hardly surprising, but Microsoft’s solution does not result in rendering of the included image in any browser other than their own.

Many others have tried their hands at providing solutions that work with IE while not breaking the behaviour of browsers that work properly with PNG transparency. A common solution is the use of some combination of the Tantek and Tan hacks to apply the image as a background for CSS compliant browsers, and using the AlphaImageLoader for IE:


<html>
<head>
	< style type="text/css" >
		#pngHolder {
			/* width and height of image */
			width: 100px;
			height: 100px;
		}
		
		/* IE interprets this as a rule for #pngHolder, 
			everything standards compliant deems it not
			to match any entity in the document */
		* html #pngHolder {
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image.png', sizingMethod='scale');
		}
		
		/* IE doesn't understand the child selector, so ignores this rule */
		html>body #pngHolder {
			background-image: url(/image.png);
		}
	< /style >
</head>
<body>
	<div id="pngHolder"></div>
</body>
</html>

This works well enough as far as it goes, but it’s a lot of work per-image, and sometimes an empty div with a background just doesn’t do the job. The majority of headings in this site are generated images, and they should have (amongst other things) valid alt text. This solution would result in the headings being invisible for users with images disabled, or visually impaired users who require a screen reader, or anyone using a text browser. To make things worse, those with certain security settings won’t even see the image in Internet Explorer.

The other common batch of solutions attack the problem with javascript. One particularly clever solution uses IE “behaviours” to run a javascript snippet against each image. Another one (on which our solution is based) replaces the image with an “inline-block” element at load time. The basic approach here involves including the defer attribute on a script tag (which causes the script to be executed when the page’s DOM is loaded), and then loop through images in the document, replacing them with new markup. Unfortunately this sometimes fails, particularly on slower dialup connections where the browser has not yet loaded enough of the heading to infer the correct size to render the replacement image. As a result some headings will appear “squashed” until a refresh of the page, when they can be loaded from cache.

The following solution uses a trick from Dean Edwards to avoid the non-standard defer attribute (so our page can still validate), as well as a novel method of hiding the alt text in a way such that screen readers such as JAWS will still read it out.

We use the “on DOM load” trick to loop through our images once they appear in the DOM (but before they have necessarily finished loading) and attach a seperate onLoad event handler to each. This handler will fire once the image has been loaded (and thus after we know its dimensions), unless the image is already loaded in which case we can perform the replacement immediately. Finally we replace the img tag with a span styled with display: inline-block so it behaves vaguely like an img tag in terms of layout, and render the alt text into another span which is forcibly located offscreen, but will still be read by screenreaders.

A number of attributes are copied from the img tag to the new span, including class, ID and styles. The script may need to be extended to copy other attributes across as and when they are found to be needed.

We include the script with a standard script tag:


< script type="text/javascript" src="/js/iePNGfix.js" >< /script >

The script itself:





var pngFix = new Object;

	/* Add an event handler to an object */

pngFix.addEvent = function (obj, evType, fn){
    if (obj.addEventListener) {
        obj.addEventListener(evType, fn, true);
        return true;
    } else if (obj.attachEvent) {
        var r = obj.attachEvent(“on”+evType, fn);
        return r;
    } else {
	    return false;
    }

};

	/* Loop through the images, add an onLoad handler to those with the ‘png’ class */

pngFix.init = function() {
	for(var i=0; i”
					+ ““ + imgAlt + ““
					+ ““;
					img.outerHTML = strNewHTML;
					i = i-1;
				}
			};
		};
		
		if(img.complete) {
			/* If the image is already loaded, just do the replacement */
			setTimeout(loadFn(img), 1);
		} else {
			/* Otherwise schedule the replacement to happen when it is loaded */
			pngFix.addEvent(img, ‘load’, loadFn(img));
		}
		
    }
	return;

};

	/* Schedule the init function to be run when the DOM is loaded – conditional comment 
	ensures that it’s only run in IE, to be kind to browsers that don’t need the fix */

/*@cc_on */
/*if (_win32)
	document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
	var script = document.getElementById("__ie_onload");
	script.onreadystatechange = function() {
	    if (this.readyState == "complete") {
	        pngFix.init(); // call the onload handler
	    }
	};
/*end @*/

To the best of our knowledge, this causes no issues with other browsers. While this is untested, I suspect that it will fail in IE only, for visual users, if images are disabled but javascript is not. This is a particularly rare combination (it seems that javascript is usually the first thing to go) so we’re not too fussed about it.

Finally we’re always eager to hear from anyone who has issues arising from the use of this technique within our site, or a suggestion for improvement. Leave a comment below, or head over to our contact page to fire us an email.

Didn't understand a word of what you wrote - i was really just wondering who you got to take the pics, and whether they would help me put together my online profile on Adult Match Maker.com?

Posted by Steve Bell / Posted Mar 18th 2007, 01:47

Yeah I'm a little late in responding. :)

Credit for all the photos goes to Marco from SuperActionGoTeam (http://www.goteam.com.au). Geek chic just doesn't begin to cover it!

Posted by Tom / Posted Jul 26th 2007, 12:01

Thank you for your article, it is really helpfull about ie, it is got such a great tips, well done.

Posted by web design sydney / Posted Jan 27th, 15:23

New commenters only

If you've left a comment with us before, just skip down to the "All commenters" section below.

Name

Website

All commenters

Email address

We hate spam! We won't display your email address (even mangled) on the site, nor will we show it to any third party. We will send a verification email the first time you submit a comment, and any other time someone tries to submit a comment using your email address without providing your password. If we send you anything else, it will be personally written and solely in response to your comment.

Password

Leave the password blank if this is your first time posting or you do not have easy access to your password. If the password is blank you will receive an email containing both your password and a confirmation link.

If this is your first time posting, be sure to fill our your name and (optional) website address above.

Comments

CAPTCHA

To prevent automated (spam) comments, we require that you copy the letters and/or numbers from the image above into this input box.