IE AlphaImageLoader, Transparent PNGs & Links

It's long been known that IE6's support for alpha-blended PNGs is non-existent. An alpha-blended PNG will not blend at all, and you're left with a horrible grey background where your nice blending and/or transparency should be.

To work around this, most sites will use the AlphaImageLoader filter from DirectX to show the image instead. Instead of using a PNG directly (either through a background image or an <img> tag), one uses a DirectX filter to show the same image with proper blending. There's a few issues with it — it's not really an image for one — but they're mostly easy to work around.

The one big problem with this method, though, is that it if a link is placed over top one of these filters, it often won't work. That's not to say it always won't work, but it often won't. Depending on the styles of the elements and even the size of the image sent in to the filter, it might work. For some discussion, read the following links:

I'm particularly fond of the test from daltonlp.com. It looks nice. He eventually got his link to work in it, but I don't think it's a good solution because it requires your background image be a preset size (and not a convenient one at that). Here's my stab at fixing it. The only major thing I've changed from daltonlp.com's setup is that I've enlarged the "honey" translucent background from a 2x10 image to a 40x40 image, which causes the broken behavior.

This link does not work in IE6/Win
filter div has position: relative
filter link has no position set
This link does not work in IE6/Win, either
filter div has position: relative
filter link has position: relative
This link does work in IE6/Win
filter div has no position set
filter link has position: relative

So what's the difference? Quite simply, it doesn't have to do with the size of the translucent image or even really whether the link has position: relative set. What matters is that the element with the filter has no position set and the link within the filtered element has a position set. If that's the case, links within the filtered element will work.

The exercise for how to absolutely and relatively position those unpositioned filtered elements is left up to the reader.