Dave Woods - Freelance Web Design Warwickshire

IE6 PNG Fix

Using GIF’s for transparency can be extremely useful but can cause problems when transparency is required against multiple coloured or image backgrounds. For this problem, you should use a PNG image instead but whilst Firefox, Opera, Safari and even IE7 support PNG transparency, IE6 fails miserably.

However, there is a solution…

First, lets have a look at the solution in action:

HTML

The HTML for this tutorial really couldn’t be much simpler. Within the body we’re using a container div and then within that we’re placing an image.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>IE6 PNG Fix</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<img src="chicken.png" alt="">
</div>
</body>
</html>

Images

If you want to create the page shown above then these are the images that I’ve used but feel free to use your own.

I’ve not yet explained why we need the blank.gif file but it plays an important part and will explain this later in the tutorial.

CSS

* {
padding: 0; margin: 0;
}
html {
overflow-y: scroll;
}
body {
padding: 10px;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 100%;
}
#container {
font-size: 0.8em;
background-image: url(farm.jpg);
width: 200px;
height: 153px;
padding: 10px 0;
}
#container img {
width: 150px;
height: 146px;
margin: 0px auto;
display: block;
}

The CSS should look fairly familiar. We’re applying a background image to the container div and then positioning the foreground image to sit on top of the background.

For IE7, Firefox, Opera and Safari this will work but for Internet Explorer 6, the transparency of the PNG won’t show correctly and we’ll need to add a fix for this problem.

IE6 PNG Fix using HTC

There are a few variations of the PNG fix but the one I prefer to use is the IE PNG Fix v1.0 RC4 method.

For this method to work you’ll also need the following file:

Once you have this file in place, all you’ll need to do is add the following line to your CSS:

* html img, * html div {
behavior: url(iepngfix.htc);
}

You’ll can get away with just applying this to all the elements required without using the star selector hack but I’ve personally used this so I’m only targeting IE6 and below just to ensure that there aren’t any issues that are caused in future releases of IE.

You may also notice that this is actually invalid CSS even though it is supported by Internet Explorer so if you want to maintain a valid stylesheet then you may want to include this CSS in a separate IE6 Conditional Comment CSS file.

Summary

And that’s it. Transparent PNG’s within IE6 can now be included site wide if required with no extra fiddly tweaks for every image.

It’s not perfect by any means and does have some restrictions with repeating transparent backgrounds and background positions havng problems but in most cases it serves its purpose well.

12 comments on “IE6 PNG Fix

  1. Ray Howell

    didn’t work for me. I copied all into a folder then created a page- and the chicken displays with an indented border which I cant get rid of and another image with a png shadow I tested it on showed the shadow as a solid thick black line. I then went to your demo page and copied all from there – same result. I’ve tried a few png fixes and the only way which seems to work is using the conditional statement and loading alternatice images which is a design pain. Thanks anyway.

  2. Ray Howell

    Hi Me again; I must be stupid maybe – I’m certainly confused – didn’t set the path to the blank.gif; that said; still doesn’t work I now end up with a white square where the chicken should be. What am I doing wrong? any ideas? The blank.gif is blank totally so it is not picking up the ‘colour’ of that. I’m lost. Bye

  3. Rob

    This is a great way of getting PNG’s to work for IE6!
    I was playing with this earlier on when I ran into a few issues with links. I was using the png as a background image within the div which has an absolute positioned link above. The link in IE6 didn’t render, nothing happened when the mouse highlighted over. I found out that the div containing the background png cannot use positioning when you want to use a clickable link! So I wrapped the div containing the background image with a div that I could position. The link I currently had was positioned absolute, this also made the link fail. By removing the positioning and then floating this element I was able to get the link working. Got there in the end!

    Ray, have you tried root relative paths?

  4. saul

    @Phil: U Could you use the following for your background and the IE6 PNG fix for non-repeatable images,

    #bgContainer { filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#aa000000, endColorstr=#aa000000);}

    Perhaps this is a little old hat or misses the point – i do realise you are looking for a uniform fix but nevertheless as a substitute for a repeatable transparent image background, which you can also layer, you could use it?!

    Within the same conditional type statements an alternative to the fix for non-repeatable images:

    #img1 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
    #img1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/tran.png’,sizingMethod=’image’);}

    Pretty old solution, i’ve been doing other things so pls don’t flame me, also some people don’t like the conditionals but works effectively and can produce some amazing effects.

    Good work Dave, I will see what i can do with this. TY.

  5. Derrck

    can’t click on links. bummer. basically useless script unless you have an image only page.

    just to let others know.

  6. Derrck

    i just used MS alpha filter. easy as pie.
    the trick with links is that the links div must have positioning and the containing div cannot. works perfectly.
    also use PNG 32 format.

  7. Martin

    Is something missing? Or have I got muddled? There is mention of blank.gif being needed, and being explained later – but I cannot find any subsequent mention of it.