IE6 PNG transparency

Question

How can I fix PNG transparency bug in IE6 for background image?

Answer 1

Be aware that the AlphaImageLoader transform can deadlock IE6.

Use PNG8s instead of regular PNG32s. You are restricted to 256 colors and 1 bit of alpha transparency, but it beats randomly deadlocking the browser.

Answer 2

The twinhelix png fix should help you

Answer 3

Ok, I'm virtually new to html/js but I think I had to change Rob Allen's answer a bit to fix two problems:

1. AlphaImageLoader() was changing the aspect ratio of my images so I needed to restore the original sizes AFTER the images were loaded.
2. fixPngs(), if called from the end of the html, was being called after the document was loaded but before all the images were loaded.

So I've changed my fixPngs() to just attach an event:

function fixPngs() {
  // Loops through all img tags
  for(i = 0; i < document.images.length; i++) {
    var u = document.images[i].src;
    var o = document.images[i];

    if(u.indexOf('.png') > 0) {
      o.attachEvent('onload', fixPng);
      o.src = u;
    }
  }
}

fixPngs() is still being called from the end of the html:

<!--[if lte IE 6]>
  <script language="javascript" type="text/javascript">
    // Do this after the page loads
    fixPngs();
  </script>
<![endif]-->

And fixPng() now fetches the caller, detaches the event, saves the original dimensions, calls AlphaImageLoader() and finally restores the dimensions:

// u = url of the image
// o = image object
function fixPng(e) {
  var caller = e.target            ||
               e.srcElement        ||
               window.event.target ||
               window.event.srcElement;
  var u = caller.src;
  var o = caller;

  if(!o || !u)
    return;

  // Detach event so is not triggered by the AlphaImageLoader
  o.detachEvent('onload', fixPng);

  // Save original sizes
  var oldw = o.clientWidth;
  var oldh = o.clientHeight;

  // Need to give it an image so we don't get the red x
  o.src          = 'images/spacer.gif';
  o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ u +"', sizingMethod='scale')";

  // Restore original sizes
  if(o.style) {
    o.style.width  = oldw +"px";
    o.style.height = oldh +"px";
  }
}

Have I overkilled it?

Answer 4

I'm going for the Necromancer badge here. :)

This isn't exactly a fix, but a handy workaround I'm using from time to time to support transparency on IE6 without any extra code at all. It won't always fit the bill, but pretty often it does.

The idea is that most of the time you will need to show your PNGs on a fixed color background anyway. A PNG file can have a background color specified, and IE6 will honor it. What you do is that you get the TweakPNG utility and open up your PNG file. There you will be able to add a bKGD chunk, which specifies the desired background color. Just type in the color that you will need to show the PNG on, and you're done.

One note - PNG files often include some values to compensate for different display devices. There might be things like intended color spaces, chromacities, gamma, etc. These aren't bad as per se, but IE somehow misinterpreted them, and the result was that the PNGs showed up darker than they should have been (or maybe IE was the only one who got it right? I don't remember...)

Anyway, if you want every browser to display your PNGs the same, you should delete these chunks with the above mentioned utility.

Answer 5

1.Add conditional css for IE6 inside the head block of your document:

<!--[if (IE 6)]>
    <link rel="stylesheet" type="text/css" href="locationOfyourCss/ie6.css"/>
<![endif]-->

2.Assign class name in your element:

<td class = yourClassName>

3.In ie6.css, apply filter. You have to specify width and height. Set background image to clear.cache.gif, the filter doesn't work without those properties:

.yourClassName{
    width:8px;
    height:22px;
    background: url("locationOfBlankImage/clear.cache.gif");
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filePath/imageName.png', sizingMethod='scale');
}

Answer 6

Use this: http://www.twinhelix.com/css/iepngfix/

This is also good for IE 5.5, but not for mac versions of IE or earlier version of IE.

I've used it on quite few sites and have had no problems with it.

There can sometimes be an ugly grey box around the PNG however until the script kicks in.