CODEWITHSUNDEEP
google-chromefirefoxanchorhtml
TriesToCommunicateClearly
TriesToCommunicateClearly

Reputation: 85

anchor inside span inside anchor, in chrome

i'm having an issue in chrome (and firefox, too, i think) i have a bit of html that looks like this:

<a id="outside">
    <span id="middle>
        :contents
    </span>
</a>

if :contents evaluates to a string or a tag other than an anchor, it renders as intended;

<a id="outside">
    <span id="middle">
        inside
    </span>
</a>

or

<a id="outside">
    <span id="middle">
        <div id="inside"></div>
    </span>
</a>

however, if it evaluates to an anchor, it renders as follows:

<a id="outside">
    <span id="middle>
    </span>
</a>
<a id="inside"></a>

the anchor is jumping outside the span. why? what can i do to fix this?

Upvotes: 3

Views: 2036

Answers (2)

technophobia
technophobia

Reputation: 2629

To fix it, you have to make sure that you never embed an anchor tag insider another anchor tag - results are unpredictable as it is not standards compliant.

If you have control over the generated code, make sure you tidy up that HTML by substituting that top level anchor with something that can contain both a div and a a tag - perhaps another div element?

References:

Upvotes: 4

Michael Freake
Michael Freake

Reputation: 1207

This is likely happening because your browser is trying to 'fix' your illegal HTML. According to the W3 documentation:

12.2.2 Nested links are illegal

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.

Here is the link to the documentation: http://www.w3.org/TR/html4/struct/links.html#h-12.2.2

Upvotes: 1

Related Questions