Broken links under <div> blocks

Filed under: — Posted on 2006.10.23 @ 23:19

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>

This link likely won’t work.

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

This link should work.

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.

Leave a Reply

(required)

Creative Commons License
This work is licensed under a Creative Commons License.
Powered by WordPress