Get our posts emailed to you with our monthly newsletter, subscribe here.

If you tend to put a lot of PNG images on your websites like I do, then you will know how much of a pain IE6 is! IE6 can display PNG images but it doesn’t play to well with transparent ones, in fact, the transparency won’t work at all! To get around this I have been using the following css hack to display a GIF image in IE6…

[css] background:url(‘../images/image.png’) !important;
background:url(‘../images/image.gif’);
[/css]

The hack is the !important part of the CSS, because if you put !important after a line in your CSS, then it will take precedence regardless of what appears after it, except in IE! This means for all browsers the PNG is displayed, but for IE the second line containing the GIF is displayed.

This is a good solution for most, and I have used it to get around the IE6 problem on several sites I have designed. Fortunately, there is another option which uses JavaScript to let you display PNG’s properly in IE6, with working transparency!

The DD_belatedPNG script was so simple to setup and so far it has worked like a charm! I have not had chance to fully test it but from what I have seen, it looks good! Here’s how to set it up for your website:

1) Download the JS file from here.

2) Include the following script in the header of your website:

[code lang=”js”] <!–[if IE 6]>
<script src="http://www.domain-name.com/js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix(”);
</script>
<![endif]–>
[/code]

3) Finally, the fix(”) part of the script requires you to include any classes or id’s from your CSS that have PNG images set as their background. See the example below:

[code lang=”js”] <!–[if IE 6]>
DD_belatedPNG.fix(‘.class1, class2 img, .class3, div.class4’);
<![endif]–>
[/code]

As long as you have your CSS Selectors correct inside fix(”) then the PNG’s should now display correctly within IE6! If you need to test out your site in IE6 then you can use IETester which is free and can be downloaded from here.

Posted by Stu Greenham

Stu Greenham is a Web Designer / Developer who lives in Hull (North East England) and works for the web agency.

2 Comments

  1. very good stuff, i like it. thanks alot

Comments are closed.