HTML5 - Adding <li> to Firefox <a> 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 displays 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> 

It seems to display correctly in Webkit. Any ideas?

Answer 1

Although HTML5 now allows <a> elements to contain block-level elements (such as ol ), the Firefox parser has traditionally disagreed that instead they convert them to a sequence of separate <a> inside block-level elements, such as what they just surrounded inline level elements what you see.

Since Firefox was the only one of the main browsers to do this, the Mozilla people accepted the HTML5 change, agreed to change their parser to allow the <a> element to wrap the contents of the block. (This is just one of many parser changes for HTML5, although it seems to be the most noticeable of them)

This change happened in Firefox 4, so you won't see a problem there, but Firefox 3.x still uses the old behavior.

Workarounds include using a <div> with the onclick attribute instead of <a> and using JavaScript to wrap the block in the <a> element, but there is no solution other than JS. Given that (a) the page should still be used as it is, and (b) that Firefox 3.x should die in the not too distant future, one reasonable option is to simply accept the bizarre behavior of Firefox 3 for now.

Answer 2

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

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

(I note that you are using HTML5, so that everything will be fine. Keep in mind that in xhtml you are simply not allowed to enclose block level elements inside the <a> tag. This will not affect you in this case, but it’s worth knowing if you ever have to work with code with xhtml doctype)