Transparent PNGs in IE6 standalone

Now that Internet Explorer 7 has been released, I imagine many web designers will be running it as their default installation of IE, and using standalone versions to test sites in IE 6 or older. One longstanding drawback of these standalone versions is the inability to use the AlphaImageLoader filter, which enables the display of transparency in PNG images. Thankfully there is now a simple solution at hand.

Background

If you’ve no idea what I’m talking about, here’s a little history.

Any web designer who has mucked around with PNGs will have quickly discovered that when you place a PNG with alpha transparency in a webpage, IE5.5 & IE6 will display an ugly flat grey color where the transparency is meant to be. This is due to a well documeted bug in Internet Explorer, that for some reason wasn’t fixed until the recent release of IE7.

Here’s an example from a site I designed recently. The image on the left shows what IE6 users see – the drop shadow is spoiled by the ugly grey boxes. The image on the right shows how the page looks to everyone else:

Luckily there are javascript based workarounds that make use of the AlphaImageLoader filter introduced in IE5.5. The trick is to use the AlphaImageLoader filter to create our transparent png, and then replace the original png with a tiny transparent gif in order to hide it. This method is no substitute for native png support, but it does the trick.

The only problem with all of this is that in standalone versions of IE, the ugly grey box remains. In a proper installation of IE5.5 or IE6 the png will display as expected, but the fact it doesn’t work in the standalones makes testing a major pain in the backside.

The solution

As Reed Wiedower discovered, all that’s required to get the AlphaImageLoader filter working again is to include two dll files in the same folder as your standalone installation: dxtmsft.dll and dxtrans.dll. Jan1234 (sorry, I have no idea of this person’s real name!) went further and explained where you could track down those dll files if you don’t already have them.

The ultimate solution

But the good folk at Tredosoft have gone further still, and now include the missing dll files in their all-in-one installer. The installer conveniently automates the process of installing standalone versions for IE3, 4, 5, 5.5 and 6. It also applies the registry fix that allows you to use conditional comments, displays the correct version number in the title bar (to stop you confusing the different browser versions), and as I mentioned already, allows you to make use of the AlphaImageLoader filter. It can also add quicklaunch and desktop icons for the standalones, to make you life just that little bit easier.

If you work with Internet Explorer standalones I highly recommend downloading the Tredosoft installer. I think we might finally have the ultimate standalone solution at our disposal!