Using The Unit PNG fix – For IE6 Only

Posted by on Mar 21, 2011 in HTML/CSS | No Comments

As you know, Internet Explorer doesn’t handle PNG transparency at all. No more filter use. While there are many other fixes to use, I like The Unit PNG fix because it is very compact. The javascript is just over 1kb. It works on image objects and background-image attributes so you’re set there. It also runs automatically before the page loads on all your elements. And lastly, it’s simple to use. Just place script in a folder, the clear image in another, add some code to the page and you’re done.

Add the following to your header area specifically to target IE6. Do this on every page where you want PNG coverage.

<!–[if lt IE 7]>
<script type=”text/javascript” src=”unitpngfix.js”></script>

Now, add the clear.gif to your images folder. Open up unitpngfix.js and make sure, in the first line, that it points to your images folder. The Unit PNG fix will run on all PNG images on the page. The fix also works on CSS background-repeat attribute. What it does is stretch the clear.gif to repeat to fill the element’s background. Add the javascript file to your scripts folder and you’re set.

The clear.gif is just a transparent gif image. You can make you own in Fireworks or Photoshop and the size is 1 x 1 pixel.  Here s the javascript file:

var clear=”images/clear.gif”; //path to clear.gif

document.write(‘<script type=”text/javascript” id=”ct” defer=”defer” src=”javascript:void(0)”><\/script>’);var ct=document.

getElementById(“ct”);ct.onreadystatechange=function(){pngfix()};pngfix=function(){var els=document.getElementsByTagName(‘*’),ip=/\.png/i,al=”progid:DXImageTransform.Microsoft.AlphaImageLoader

(src='”,i=els.length,uels=new Array(),c=0;while(i–>0){if(els[i].className.match

(/unitPng/)){uels[c]=els[i];c++;}}if(uels.length==0)pfx(els);else pfx(uels);function pfx(els){i=els.length;while(i–>0){var el=els[i],,elc=el.currentStyle,elb=elc.backgroundImage;if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;es.width=el.width;es.filter=al+el.src+”‘,sizingMethod=’crop’)”;el.src=clear;}else{if(elb.match(ip))

{var path=elb.split(‘”‘),rep=(elc.backgroundRepeat==’no-repeat’)?’crop':’scale’,elkids=el.getElementsByTagName(‘*’),j=




If you wish the script to work on only specific images, add a class of unitpng to those elements. This will cause only the specified elements to be fixed with this script. The script has been updated to fix any flickering issues that were present before.

So there you go. You can now use transparent PNG images in your projects knowing they will look nice and pretty in IE6.

Liked this post? Subscribe to my RSS feed and get loads more! If you enjoyed this article tweet it and follow me, I’d appreciated it. it.

Leave a Reply