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.

Browser Testing at its Best

With the upcoming release of Internet Explorer 7, it is time to add this browser to the web development testing process. The difficulty is that Microsoft is not supporting developers in running both IE6 and IE7 Beta on the same computer. Thanks to the developer community it is now possible to run both versions simultaneously.

It's also important to test Flash development in the recent Flash player, a previous version like Flash player 7, and a browser without the Flash player installed. This is especially important if you are experimenting with any of the new features in Flash 8.

Like many Web designers, I work primarily on a Mac. I have a PC at my desk for testing purposes and I use Microsoft's Remote Desktop Connection software for Mac to remotely connect to the PC. Recently I was able to update the PC with this setup:

• IE7 Beta 3, Flash 9
• IE6 (standalone), Flash 9
• Firefox, Flash 7
• Opera, No Flash

Here's how I did it:

1. Install Firefox and Opera
2. Download and install IE7 Beta 3
3. Download the IE6 standalone
4. Close all running browsers
5. Uninstall the Flash player using Adobe's Uninstaller, in most cases this will also leave Opera without the Flash player
6. Download and run the Flash player 7 installer, select only the latest version of Firefox during the install
7. Open IE7 and visit the Flash player update page. Proceed to install the Flash player in IE7 through the online installer. This installation will also apply to the standalone version of IE6

Update: I'm now using Parallels Desktop to run Windows XP on my MacBook. If you have an Intel-based Mac I'd highly suggest using this. It is much faster than VirtualPC, and allows you to quickly run XP in full-screen mode.