Transparent PNG for IE6

IE6 is a bear when it comes to transparent PNG images. In a perfect world, we'd build an app and not worry about the older browsers -- ensuring that the functionality is there, though the layout and graphics might not work right. However, with anywhere from 10 - 20% of users still browsing with IE6 as of this writing, we'd like to have pages look reasonably well for that browser as well.

The AnythingSlider library, by the incomparable Chris Coyier, uses transparent PNGs for the back/forward buttons. They look beautiful and blend so well into the component. If you view the control in IE6, however, you'll immediately see the non-transparent backgrounds of the PNG images.

Not to worry: Angus Turnbull has written the IE PNG Alpha Fix, which is a CSS HTC behavior. Once you download the code and placed it on your site, you can use an IE conditional statement like this to fix the problem in IE6:

<!--[if lte IE 6]>
<style type="text/css" media="screen">
 img, div, a.arrow { behavior: url("iepngfix.htc") }
</style>
<![endif]-->

Ensure you have the correct URL to where you've placed the HTC file on your site. This particular CSS rule says that the behavior should be applied to all IMG and DIV tags, as well as any anchor tag with the style class "arrow" (used by the AnythingSlider to display the back/forward PNGs).