IE PNG - The PNG Transparency Problem in Windows Internet Explorer

2

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Enter your email address:

Never Spam

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!

It appears you are new around here. You may want to subscribe to my RSS feed or register for email updates. Thanks for visiting!