IE6 PNG transparency

Question

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

Answer 1

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.

Answer 2

The twinhelix png fix should help you

Answer 3

For example with Dean Edwards' ie7.js

Answer 4

Use PNG Behaviour.

ie6.css:

img {
   behavior: url("pngbehavior.htc");
}

page.html:

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

Answer 5

You could be brave and simply state that your site may not render well on IE6. Perhaps not the most commercially minded approach but we'd do all of ourselves a favor (even Microsoft) if we just let IE6 die. Of course since a large amount of online activity happens on corporate machines with IE6 nailed to them that isn't really going to happen soon. :(

Answer 6

I like this Javascript solution writen by David Cilley some time ago. It gets out of the way of compliant browsers and can be used with any back-end you want. It does still require a blank gif image though.

Add these functions to your HTML Header or other existing .js include:

<script type="text/javascript">
    function fixPngs(){
    // Loops through all img tags   
        for (i = 0; i < document.images.length; i++){
            var s = document.images[i].src;
            if (s.indexOf('.png') > 0)  // Checks for the .png extension
                fixPng(s, document.images[i]);
        }
    }

    function fixPng(u, o){
        // u = url of the image
        // o = image object 
        o.src = 'images/spacer.gif';  // Need to give it an image so we don't get the red x
        o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + u + "', sizingMethod='scale')";
    }   
</script>

Put the following conditional comment at the bottom (footer section, just before </body> ):

<!--[if lte IE 6]>
    <script language="javascript" type="text/javascript">
        //this is a conditional comment that only IE understands. If a user using IE 6 or lower 
         //views this page, the following code will run. Otherwise, it will appear commented out.
        //it goes after the body tag so it can fire after the page loads.
        fixPngs();
    </script> 
<![endif]-->

For a more comprehensive approach to IE6 oddities, try the IE7 Javascript library.

Answer 7

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 8

To be a nitpicker, it's not a bug. IE6 simply doesn't offer PNG transparency.

Not supporting a feature is not the same thing as a bug.

Answer 9

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 10

This is a great article about this problem. In summary, it provides a JS library called SuperSleight. I have used it in the past with a decent amount of success.