IE PNG – The PNG Transparency Problem in Windows Internet Explorer

As many web developers may already know, several versions of Windows Internet Explorer (IE), cannot properly render PNG image transparencies. There are many CSS hacks and tricks out there to skirt this issue, most often by using less sexy graphics specific for IE browsers.

There is also a lesser known way of fixing the IE problem using a few simple lines of JavaScript.

The only downside to the JavaScript solution is that it only works on <img> elements, and does not work on background images or images placed with a style sheet. Also, the images must have their height and width attributes defined in the HTML.

The following JavaScript code is made available by ntlworld.com:

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
      }
   }
}

To use this code, simply call the script to the file in need of the fix and be certain your PNG images have the height and width attributes defined.

That’s it!

Enjoy This Article?

Now is your chance to join our growing community! Be the first to know about great new articles like this one. Register for my Email Updates or RSS Feed today!