A Dead-Simple PNG Fix For Internet Explorer 6 (IE6)
As you know, IE6 does not render transparent PNGs appropriately by default. We can work around it using IE’s proprietary expression CSS property, and there are myriad libraries available to make this easier. However most approaches usually involve creating a separate CSS file for IE6, and most don’t support repeating background images (via the background-repeat CSS property).
We recently stumbled into Drew Diller’s belated PNG fix for IE6, which is the simplest implementation so far, and fully supports repeating background images. All that’s needed is to include a Javascript file and pass an appropriate CSS selector to the library’s fix() function, and the library handles the rest.
The following code will implement the PNG fix for all elements with the class “png_fix”, using the DD_belatedPNG library. Its wrapped in conditional comments so that only IE6 will include the script:
1 2 3 4 5 6 | <!--[if IE 6]>
<script src="/js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.fix_png');
</script>
<![endif]--> |
Note: its important that you leave the script include and the call to fix() in seperate script elements. If you combine them into one, the fix will not work.
The above code can be adapted for nearly all use cases, but there are a couple of known issues that you should be aware of:
- The fix will not work on the <body> tag. If you need to use a PNG on the body tag, just add an extra container div and apply the PNG background and fix to it instead.
- <tr> and <td> elements are not supported. This is unsurprising, as these elements already behave strangely with background images in many browsers, especially <tr>’s.
- <input type=”image”/> elements are not supported. Use a <button> element instead.
We’ve used this library in several live projects, and its worked wonderfully. Hopefully it will save you some time and headaches too.
