How to fix IE6 PNG hack links not being clickable
When you're replacing a PNG using the CSS PNG hack for IE6 you'll find that links stop being clickable; here is a tutorial to end your suffering.
What you're trying to do and the actual problem
Undeniably Internet Explorer 6 is one of the biggest thorns in the side of web development; layout oddities galore, yet the single most pressing issue with it isn't it's inability to handle correct CSS - it's the lack of PNG support. Almost every decent design these days requires some degree of transparency and IE6 only natively supports GIF's, which in turn only support binary transparency.
It's pretty likely that you'll end up using a PNG hack of some description (rather than compromise on aesthetics, it's still a weighty demographic). However, if you use a PNG as a background image and use CSS to create a link around it, you'll find when the CSS PNG hack is applied the link stops being clickable in IE6. This is a royal pain in the posterior, but here is a solution that works.
What we're going to do
The problem is that the filter you apply is breaking the flow of the document in IE6's eyes, so it's unsure whether the link is above or below the PNG. Typically this would be an easy fix using z-index but don't forget IE is "special". Therefore we need to add in an extra div, change the positioning and toy with z-index. Right, let's get started...
Initial Setup and PNG hack
I'm using this actual website as an example, because it's stuff I had to overcome as part of the development. All I've got is a container (downloadbox) with a link within it. The link simply has a non-breaking-space in it, as it derives layout from the CSS. Nice and simple...
Here is the CSS used for the above layout. I'm just adding width and height to the container, setting the background image and forcing the dimensions of the link used. This works in Firefox, IE7, Opera and Safari (theoretically).
The link is given width and height and block display. Removing the outline just makes things a lot tidier by not having that dotted line around the link when it's clicked on. This works in the good browsers, but because we're just using a PNG, IE6 messes up in a big way.
Apply the CSS PNG Hack
So you apply the CSS PNG hack and everything works fine right? If you're not sure how to do this you can either work it out from the demo or check out my tutorial on how to apply it. However, the link that was working previously with the messed up PNG is now no longer clickable... Fail.
How to fix this in IE6
It feels a little bit like bowing down to the devil, but some poor misguided people still use this black-eye of a browser, so let me explain how to fix it. Firstly, let's step into the XHTML and make one very simple yet signifcant change...
That's right, just add in a div to wrap the link. The significance of this can then be seen in the restructured CSS:
Where the CSS PNG hack would have been applied to the downloadbox container we've now moved it to the newly created div. This is given width and height (so the image appears properly). Remember to set the background image to be "none" on the container too - it's part of the CSS PNG Hack. So the PNG is moved to the new wrapper, and we've added z-index and relative positioning to the link.
BINGO - it works
That's it. Simple a change as it is, it actually makes sense in a daft IE6 sort of a way. Simply by making your markup ugly and restructuring you can have a nice, cross browser set of PNG links. Check out the demo for a decent comparison.
