Clicking on links behind transparent PNGs in IE6

13
Oct
by Cameron

I'm sure for all you developers out there, the never-ending nightmare from which there is no respite (namely, Internet Explorer 6) has left you screaming at the monitor and threatening to burn Redmond to the ground, but here's one little problem you won't have to commit quite so much arson for.

We're all well aware of the issues associated with getting transparent PNGs to display correctly in IE6, but have you ever tried to put a clickable object behind a div with a transparent PNG in it? Well, you'll soon discover it doesn't work. The answer is pretty simple though - set position: relative; on the elements behind the transparent PNG, and they'll work like a charm!

Comments

I have recently written this article to show you how to export png 8 in Fireworks. http://tocs-i.com/blog/how-to-export-transparent-pngs-from-fireworks-that-have-a-small-file-size-and-work-in-ie6/

Submitted by Scott (not verified) on Thu, 20/10/2011 - 00:13.

jacmkno, You might want to use a conditional stylesheet to prevent the IE6 fix from interfering with other browsers.

Submitted by Alex on Thu, 21/04/2011 - 14:15.

Doesn't work in chrome...

Submitted by jacmkno (not verified) on Fri, 15/04/2011 - 14:41.

Post new comment

The content of this field is kept private and will not be shown publicly.
Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.