If you’ve ever tried to implement transparent PNG files on the Web, you’ve probably found that they don’t work in all browsers. This isn’t a big surprise since different browsers pick and choose what they implement as standards. I’ve always had the most problems with Internet Explorer, especially when working with transparent PNG images in IE 5.5 and 6.0—until the day I discovered CSS filters from Microsoft.
Programmers often use Microsoft’s CSS filters just to add a few design elements to their pages, but they do have some practical uses as well. Although the filters are only compatible with Internet Explorer, that’s fine because other browsers implement transparent PNG files without needing any extra help.
This column will show you how to use transparent PNGs in your Web sites without having to worry about them breaking in earlier versions of Internet Explorer. You can view a live sample of layered PNG images here and download the source code here. The sample uses a JavaScript method, which implements a Microsoft CSS filter to preserve the transparency in the PNG images.
