The Final Word on Transparent PNGs
It's becoming clear that the PNG image format is preferred for Web design. The JPG format might be a better choice for photographs, but PNG has many advantages over the prehistoric GIF. The PNG alpha-channel transparency seals the deal by giving designers Photoshop-quality transparency.
The only thing holding us back is a lack of support for transparent PNGs in Internet Explorer 6. While many Windows XP users have upgraded to IE7, it may be another year before we can fully drop support for IE6. There have been many different techniques to use the AlphaImageLoader filter to allow transparent PNGs in IE6, but one finally stands out in the developer community. It comes in two different forms, each applied differently, but both using almost identical code.
The IE PNG Fix v1.0 RC4 from Angus Turnbull is currently being using on the Apple Web site. You need the iepngfix.htc and blank.gif files, and apply the fix by adding behavior:url(iepngfix.htc); to your stylesheet. This can be done with one style for inline PNGs, and also added to individual styles if using transparent PNGs as background images.
The other form of this fix is SuperSleight by Drew McLellan. This one is published on the 24ways Web site and is well accepted by developers. It also promises to fix other issues with transparent PNGs in IE6 — issues besides just display. SuperSleight is applied by adding a conditional comment to target IE6 and load a javascript file that does all the work.
Even with these elegant hacks, IE6 still won't let you use background-repeat or background-position with transparent PNGs. For my personal Web site I rely on tiling a transparent PNG down the background, so in the end, I'm going to turn off PNGs for IE6 that are used in the background of this site.
Comments
I server out gif images for IE6 if you look at my site(ajcates.com) in IE6 you will receive gif images instead of pngs images, it gives it a jagged look, but that is only 25% of the web I am giving it to, since it is a personal site I do this, had it been a business site I would have made sure that the png images looked correct in all browsers.
Who you calling "prehistoric"? I set the bar for transparency. Please use "legendary" or "founding member of the transparency movement"
You don't have to turn them off for IE6, just set the sizing method in the filter property to "scale" and make sure that the png image is simply a 1x1 image of the dark transparent overlay. As long as the image is the same all over, the filter will just stretch it for IE6, and the effect will be the same as if the image was "repeat-x" and "repeat-y".
This is what facebook does for the borders of their popup boxes when sending a message to a friend from someones profile (checkout their stylesheet using the firefox web developer extension and search for the "filter:" property, you'll see what I'm talking about).
Check out this article to find out how to use transparent repeated background images in IE6. Hope this helps.