PNG hack for IE5/6

Internet Explorer 5 and 6 cannot handle transparency in PNG images. If the image is just loaded with an HTML IMG tag there are many workarounds available. For Drupal there are modules like PNG Behave and PNG Fix. Alternatively you can use the following Javascript code:

/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
*/

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

 

If the PNG image appears stretched, then change the sizingMethod from 'scale' to 'crop'.

The problem that I was facing is that my PNG image is loaded as background of a div using CSS, and then the workarounds above would not work. I was trying to darken or lighten an image by overlaying an image with a div which has a PNG as background image. All workarounds use the propriertary AlphaImageLoader. You can use it directly in an exploder-only CSS file like this:

div {
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/image.png', sizingMethod='crop');
   width: 400px;
   height: 400px;
  }

This only works with fixed size elements. However if you leave out the height (auto) and put the width at a percentage, like 100%, then it works too. The sizingMethod may be set to scale to scale the image.

div {
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/image.png', sizingMethod='scale');
   width: 100%;
  }

The width may cause other problems in IE because of the box model bug. To workaround that, put any padding in an inner div and any borders in an outer div. Never put width together with padding or border in the same div, or IE5 and IE6 will break.

The path may be relative instead of absolute, but the current directory in IE's filter may not be what you would expect. In Drupal it appears to be Drupal's base path, so "sites/all/themes/your_theme/your_image.png" would work. If IE cannot find the image, the div will be transparent. Do not forget to set the background to "none" for IE.

Another problem arises, though: the links and input fields within the div often don't work. The solution is that the div with the filter should not have a position set, and that the links should have a position set, for example position: relative;. In other words:

div a, div form {
   position: relative;
}