Broken links under <div> blocks
When creating documents in HTML that make use of <div> blocks to position elements on the page links can appear to stop working if they are in the area bound by the block. Browsers appear to render HTML code in different orders, so a block that appears after a link will suppress the link in the rendered page. It is obvious once you understand the problem, but took some time to sort out when I could see the text clearly, especially since in one case the link worked in IE but not Firefox
An example:
<div style="position: relative;">
<p style="position: relative;">
<a href="">
This link likely won't work.
</a>
</p>
<div style="position: absolute;
top: 0px;
width: 100%;
border:solid 1px;">
<p style="text-align: right">
DIV block text on the right.
</p>
</div>
</div>
DIV block text on the right.
Fortunately the fix in some cases is as simple as reordering the link and <div> blocks so that the block gets rendered first:
<div style="position: relative;">
<div style="position: absolute;
top: 0px;
width: 100%;
border:solid 1px;">
<p style="text-align: right">
DIV block text on the right.
</p>
</div>
<p style="position: relative;">
<a href="">
This link should work.
</a>
</p>
</div>
DIV block text on the right
Clear as day once you know what’s happening - the text has rendered properly and appears to be a link, but it cannot be clicked in some browsers. The <div> that has been layered over top of the text can be seen through, but the hotspot for the link is in the layer under the block.