IE6 gotcha – transparent pngs as links – only the non-transparent bits clickable

IE6 doesn’t display transparent png images properley – by default the parts that are supposed to be transparent display as grey instead. Fortunately an excellent workaround exists in the form of PNGFix by Twin Helix. However this doesn’t completely solve the problem: if you are using transparent PNG’s as links – only the non-transparent parts of the image are clickable, which can be a significant usability issue. So far I haven’t found an elegant workaround for this, but would be interested to hear of any.

archived comments

Had exactly the same problem on a site build last week.

To the best of my knowledge there is no work around 🙁

My work around was less than elegant – but I resorted to using the PNG’s in FF, but then slicing out the alternative GIFs from a screenshot taken from the working Firefox version.

Clunky and annoying but it did work reasonably well visually…

Another thing that may help in some circumstances – look into PNG8 alpha transparencies. Which degrade quite well in IE…

Steve Kirtley 2008-08-19 16:04:53

Posted in css