Breaking IE 6 with links on PNG backgrounds

In IE there’s a whole slew of troubles with PNG. One such trouble is links or anchors will not work in IE if you have a PNG image that has gone through the Microsoft [AlphaImageLoader], which is the only known way to render PNGs in IE6.

The solution, involves running the image filter on a separate element, and then positioning all the links within that element in a higher z-order. This is explained in better detail in Filter Flaws.

I’ve been running into too many designers who have been sending me too many designs that require translucent layers, and alpha-transparencies (and they should be able to, even though the trend is more simple these days). This of course subjects me to pretty much any strange quirk that IE6 can dish out with PNGs.

What’s frustrating is that 5 years ago I had PNGs problems. This is the Internet… very few problems on the Internet last that long. There’s certainly been enough people complaining about this malfunction in IE for years.

The problem with these problems is there is no “right” solution. Using [AlphaImageLoader] is a hack. As we can see with laying links upon backgrounds that use the loader, it’s prone to behavior we don’t normally expect. We shouldn’t have to raise the links above an invisible layer, in order to click on them.

Unfortunately as long as the majority of our users continue to use IE 6 (or older) we’ll be stuck with this problem. If we look at adoption rates it won’t be until a year after Internet Explorer 7 is out until it’s the top dog. Even then, if Firefox is still at 10% marketshare, that leaves another 40% with IE6 (or less) and the less popular browsers. We’re still stuck with this problem for some time.