Transparency woes in IE6, or, how to fix your intangible links

Internet Explorer 6 has the most annoying bug with transparent PNGs: some (or most, it seems like) dimensions cause IE6 to break a bunch of links within the container of the transparent background image. The links are still visible, but they can’t be clicked, and they don’t react to the cursor hovering over them.

The fix is to change the dimensions of the offending PNG (though it’s not really the PNG that’s being offensive, it’s IE). Your mileage may vary, and unfortunately, tests seem to indicate that no single dimension combination seems to work reliably.

Note that the alpha transparency in IE is created via a proprietary filter CSS attribute. Note also that the source image must be located in the same directory as the web page calling it. I have no idea why.

One fix as demonstrated by Satzansatz.

---