Fixing PNGs in IE6 with DD_BelatedPNG

ie6-png-fix-transparent-png-image-support-for-ie6DD_belatedPNG was created for the single purpose of allowing alpha-transparent PNGs to be used in IE6 without resorting to Microsoft’s proprietary AlphaImageLoader filter. As anyone who’s tried to use PNGs in IE6 before knows, although they can be made to work to a very basic degree, things like repeated background-images are out of the question.

Using the AlphaImageLoader filter only fixes half of the PNG problem in IE6 as it can only be used with background images. To make use of alpha-transparent PNGs on <img> elements, another fix is used, which is typically the HTC fix which relies on a transparent PNG and an HTC behavior file. Additionally, as Firebug and YSlow users will be aware of, Microsoft’s AlphaImageLoader is slow; one of YSlow’s guidelines is to avoid the filter at all costs.

DD_belatedPNG uses Microsoft’s implementation of VML to replace PNGs with VML elements, which do support alpha-transparency. It can be used with both full <img> elements and CSS background-images. When background-images are replaced, common features such as background-repeat and :hover states can also be used so this library solves all of the common PNG problems in IE6.

Usage

Simple and nice

  1. <!–[if IE 6]> <script src=“DD_belatedPNG.js”></script>
  2. <![endif]–>

Load the script only when ie6 is present.

  1. <script type=“text/javascript”>
  2. DD_belatedPNG.fix(“.linkButton”);
  3. </script>

Fixed PNGs in IE6 will now appear as they should and can be background-positioned and repeated, and also work with :hover states, unlike Microsoft’s proprietary filter.


Leave a Reply