Better IE PNG fix

 May 20th, 2008 |  Daniel MacDonald |   Filed under: Stylesheets

The PNG behavior fix for Internet Explorer 5.5-6 has been around for some time. There are other pure JavaScript solutions to enable alpha-transparent PNGs in our favorite web browser, but I prefer the behavior approach, because I don’t have to clutter my JS code with browser specific hacks. This solution is only for <img> elements with a PNG as the source (alpha-transparent background images are another story, where the use of JavaScript is better suited)

What’s wrong with the popular solutions (google: “png.htc”)? They require the height and width of the image to be explicitly set for the behavior to operate properly. In this age of AJAX and dynamic content, the dimensions of an image may not be known. This behavior will compensate by getting the actual image dimensions (note: this technique will not work if the image is resized through stylesheets or script)

png.htc

<public:component>
<public:attach event="oncontentready" onevent="filterImage()" />
<script language="jscript">
  var original = element.src; 
  var spacer = "/img/blank.gif"; 
  var htc = /MSIE ((5\.5)|[6])/.test(navigator.userAgent) 
    && navigator.platform == "Win32"; 
  function filterImage() { 
    if(/\.png$/.test(original) && htc) { 
      element.style.visibility = 'hidden';
      var preload = new Image();
      preload.onload = function(){
        element.style.height = element.style.height ? element.style.height : this.height;
        element.style.width = element.style.width ? element.style.width : this.width;
        element.src = spacer; 
        element.runtimeStyle.filter = 
          "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + original + 
          ", sizingMethod='scale')"; 
        element.style.visibility = 'visible'; 
      }
      preload.src = element.src;
    } 
  } 
</script>
</public:component>

Save the above file as png.htc and insert the following into the <head> of the document:

<!--[if lt IE 7]><link rel="stylesheet" href="css/ie.css" 
  type="text/css" media="screen" /><![endif]-->

Your ie.css should look like:

img {
  behavior: url(png.htc);
}

The good news is that Internet Explorer 6 numbers are dropping, and web developers can look forward to a day when all major browsers have native alpha transparency support, but until then, we have to come up with our own solutions.


Tags: , ,

2 Comments on “Better IE PNG fix”

  1. Angel Says:

    June 10th, 2008 at 11:54:19

    Hi, this works great on my site but I wonder if it supports div elements or just img tags? Thanks a lot.

  2. Daniel MacDonald Says:

    June 11th, 2008 at 01:33:46

    This behavior only affects <img> tags in Internet Explorer. Background images are another story. The AlphaImageLoader filter doesn’t allow positioning (top left is what you get) or tiling (no-repeat) of background images. I usually address background image transparency as needed in my IE-only stylesheet.

    #mydiv {
  width: 100px;
  height: 100px;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='mypng.png' sizingMethod='crop');
}

Leave a Comment