Transparent Links Are Not Clickable in IE
Oh yes, I forgot. Although it works fine in Firefox, in IE(8) you can't click on a transparent link placed on top of something else if there is something below it. Take, for example, the following code:
Which produces:
In IE, you can't click on the link above the text. (It may work fine elsewhere.) Interestingly, giving a background colour to the A element makes it immediately clickable:
Hence a possible solution: create a transparent image, and use it as a background image of the A element. It will work as expected.
<div style="width:100px;height:100px; position:relative;border:1px solid blue;"> <div style="width:100px;height:100px;">content<br />content</div> <a style="position:absolute;left:0;top:0; width:100px;height:100px;" href="link"></a> </div>
Which produces:
In IE, you can't click on the link above the text. (It may work fine elsewhere.) Interestingly, giving a background colour to the A element makes it immediately clickable:
<div style="width:100px;height:100px; position:relative;border:1px solid blue;"> <div style="width:100px;height:100px;">content<br />content</div> <a style="position:absolute;left:0;top:0; width:100px;height:100px; background-color:red;" href="link"></a> </div>
Hence a possible solution: create a transparent image, and use it as a background image of the A element. It will work as expected.