How To/webdev/

Problem with anchor (a element) and position:absolute in IE6

When using position:absolute on <a /> element and it is over another element (eg. image) only text is clickable, even if element has set width and height. This is bug in Internet Explorer 6 and it is quite hard to avoid.

If your link is transparent and has no text you can set background to make it clickable. But background cannot be transparent. If you need transparent background set background:#fff; filter:alpha(opacity=1) to it. It will not be fully transparent but it is ok for most cases. Adding background makes link clickable.

If you cannot set alpha filer because you want to have text and transparent background you can use 1 px transparent gif as background. It will solve problem, but requires 1 more request to server.

Example

This is element under block link... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...

In IE6 only text (and border) is clickable!