Extras & Tools
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.
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.
class attribute to any transparent PNGs, with a value of
Indicating that any image whose
class attribute has the value of
png should use this script to display properly.
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
<img src="/images/test.png" width="100" height="100" alt="buy" class="png" />
DD_belatedPNG_0.0.8a-min.jsis compressed (making the file size smaller - although it is harder to read)
DD_belatedPNG_0.0.8a.jsis uncompressed (making it a larger file size but easier to read)
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> 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: