Making PNG files render correctly in Internet Explorer 5.5 and 6

PNG files are handy when you want a graphics file with transparency. JPG has no transparency, GIFs can have either 100% colour or 0% colour, but PNG is the only widely supported internet graphics filetype that allows you to have smooth gradients from solid colour to transparency.

Unfortunately, IE5.5 and IE6 don't correctly support the transparency in a png file. The solid colour looks fine, but any part of a PNG file that is transparent just appears as a solid grey in these browsers. If it was just IE5.5 that was the problem, we could probably safely ignore it these days, but it's still estimated that about 17% of the market uses IE6 (as of May 2009). A PNG with transparency in IE6 looks terrible, and 17% of the market is most often too large a share to ignore.

You may have heard mention of a javascript method of fixing the rendering of PNGs in IE5.5 and 6. I heard about it over a year ago and did some quick research but only found sluggish solutions that I couldn't get to work in the limited time I allowed myself.

I stumbled across a nice, lite solution here recently that I can confirm works as long as javascript is on. This solution has apparently been around for years, so I guess it's old news - but old methods are often the best due to their simplicity, and I haven't had any problems with it so far.

It's really easy to get this fix working. Simply copy the following code into the <head> of any page that has PNG files on it:

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

You're probably familiar with these <!--[if lt IE 7]> tags, but for those who aren't, they're a proprietary tag that only IE will recognise. To any other browser they look like a normal comment, so they'll just ignore them. The conditional tag inside it, "If lt IE 7" means that IE7 and above will also ignore the tag. This allows us to apply the javascript file only to the browsers that need the png fix, so we have no chance of causing the fix to clash with other browsers.

Next save the following javascript as pngfix.js (in the same directory as the page. You can move it, just make sure you update the link in the html accordingly. Likewise with the name of the file.):

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

That should be all you need to get PNGs rendering correctly for IE5.5 and 6.

Well... it's just the one file... but I don't want to make another button.

Making PNG files render correctly in Internet Explorer 5.5 and 6

More...