Extras & Tools

back to all tools and extras

How to make IE6 display transparent PNGs correctly

Transparent PNGs can be a very helpful tool in any web designers tookit, for example we use them on the front page of this site to create the links to read the sample chapter or buy the book.

Unfortunately, Internet Explorer 6 did not support transparent PNGs, and they end up having a greyish background. Because some of the visitors to your site will probably still be using IE6, this article teaches you a handy JavaScript technique you can use to enable transparent PNGs to show up correctly.

The Background

IE6 was originally released back in 2001 but it took five years before Microsoft released IE7 in late 2006. Although some sites are discontinuing support for IE6, you (or your client) may need your site to work in older browsers, so this technique can be helpful to know.

There are several different JavaScripts available on the web to get around this problem, although the one I will describe on this page is called dd_belated, and was written by Drew Diller.

The Solution

Adding a JavaScript to the head of the page.

Adding a class attribute to any transparent PNGs, with a value of png.

Indicating that any image whose class attribute has the value of png should use this script to display properly.

Wrapping the JavaScript in a conditional comment so it only applies to IE6.

 

How It Works

1) Any transparent PNG (or an element holding a transparent PNG as a background image) is given a class attribute with a value png.

<img src="/images/test.png" width="100" height="100" alt="buy" class="png" />

2) Download the JavaScript file from here. In the zip file are two versions of the JavaScript file (both do exactly the same thing):

I use the compressed version when adding the script on any website.

3) Add a link to the script in to the <head> of the web page. The src attribute needs to point to the place where the script is stored on your server (in this case it is a directory called js, which lives in the root directory of the site).

<script type="text/javascript" src="/js/DD_belatedPNG_0.0.8a-min.js"></script>

4) Add the following JavaScript directly after the line that includes the DD_belated JavaScript file:

<script>
  DD_belatedPNG.fix('.png');
</script>

The bit that says .png (inside the parentheses and single quote marks) indicates that it should apply to all elements that have a class whose value is png (this is just like a CSS selector).

5) Since the problem only applies to IE6 and earlier, we can put these two <script> elements inside something called a conditional comment, this means that anything inside the comment will only be used by IE. Furthermore, because this one says if IE 6, it only applies to IE6:

<!--[if IE 6]>
  <script src="/js/DD_belatedPNG.js"></script>
  <script>
    DD_belatedPNG.fix('.png');
  </script>
<![endif]-->

The basic structure is the same as an HTML comment, and these conditional comments can only be used in HTML pages. For more information on Conditional Coments have a look at http://www.quirksmode.org/css/condcom.html.

Further reading and alternative techniques

The above is only one technique of many, the following links offer some alternative ways to enable IE6 to display PNGs correctly: