HTML5 - Enclosing <li> in <a> Firefox problem?

Question

When I do this...

<li>
    <a href="#">
      <img src="#" width="#" height="#" alt="#" />
      <ol class="#">
        <li>#</li>
        <li>#</li>
        <li>#</li>
      </ol>
    </a>
 </li>   

It renders it in Firefox like this...

 <li>
    <a href="#">
      <img src="#" width="#" height="#" alt="#" />
    </a>
      <ol class="#">
      <a href="#"></a>
        <li>a href="#">#</a></li>
      <a href="#"></a>
        <li>a href="#">#</a></li>
      <a href="#"></a>
        <li>a href="#">#</a></li>
      </ol>
    <a href="#"></a>
 </li>     

Seems to render properly in Webkit. Any ideas?

Answer 1

Although HTML5 now permits <a> elements to contain block-level elements (e.g. ol), Firefox's parser traditionally didn't accept that, instead converting them into a sequence of separate <a> inside the block level elements such that they only surrounded inline level elements, which is what you see.

Because Firefox was the only one of the major browser makes that did that, the Mozilla people accepted the HTML5 change, agreed to alter their parser to permit the <a> element to wrap block content. (It's just one of many parser changes for HTML5, although it seems to be possibly the most prominant one)

That change has happened in Firefox 4, so you won't see the problem there, but Firefox 3.x still uses the old behaviour.

Workarounds, include using a <div> with an onclick attribute instead of the <a>, and using JavaScript to wrap the block in an <a> element, but there's no non-JS solution. Given that (a) the page should still be usable as is, and (b) that Firefox 3.x should die out in the not too distant future, one reasonable option is just to accept the quirky Firefox 3 behaviour for now.

Answer 2

The <a> tag has a default style of display:inline; which makes it unsuitable for containing block level elements.

However, you can get around the problem by changing the display property of the <a> element to either block or inline-block, depending on how you want it to display.

(I note that you're using HTML5, so you'll be fine. Be aware that in xhtml, it is simply not allowed to enclose block-level elements inside an <a> tag. This won't affect you in this case, but it's worth knowing in case you ever have to work with code with an xhtml doctype)