Firefox Bug?: Getting more content generated & list items

It seems like with html like

<ul id="projectsList" class="list-style-1">
  <li>
    <a href="/projects/view/1">
      <p class="heading">New Project 1</p>
      <p class="desc">by <strong>jiewmeng</strong></p>
      <ul class="meta">
        <li>Your progress <strong>0%</strong></li>
        <li>Project's Progress <strong>0%</strong></li>
     开发者_C百科   <li>Your tasks due today <strong>0</strong></li>
      </ul>
    </a>
  </li>
</ul>

firefox adds markup to make it

<ul class="list-style-1" id="projectsList">
  <li>
    <a href="/projects/view/1"></a>
    <p class="heading"><a href="/projects/view/1">New Project 1</a></p>
    <a href="/projects/view/1"></a>
    <p class="desc"><a href="/projects/view/1">by <strong>jiewmeng</strong></a></p>
    <a href="/projects/view/1"></a>
    <ul class="meta">
      <a href="/projects/view/1"></a>
      <li><a href="/projects/view/1">Your progress <strong>0%</strong></a></li>
      <a href="/projects/view/1"></a>
      <li><a href="/projects/view/1">Project's Progress <strong>0%</strong></a></li>
      <a href="/projects/view/1"></a>
      <li><a href="/projects/view/1">Your tasks due today <strong>0</strong></a></li>
      <a href="/projects/view/1"></a>
    </ul>
    <a href="/projects/view/1"></a>
  </li>
</ul>

I narrowed the problem to the meta list items if I comment out the meta list, it works http://jsfiddle.net/MSegC/2/

I want to use the <a> as a block level element as I want the user to be able to click the whole box to enter the link

A is not a block level element in html (at least in html 4) so the short story is you can't use it like this :). That's why FF breaks' it for you.

http://htmlhelp.com/reference/html40/block.html

You should do what you want with an onclick event on the containing block.

Another option seems to be to force the doctype of the page to be html5 since in html5 it is possible for a to be a block level element.

http://davidwalsh.name/html5-elements-links

As previously mentioned, <a> is not a block-level element, but you can make it into one by setting the display property to either block or inline-block.

display:block; should make it act like any other block-level element.

display:inline-block; is a half-way house between making it a block-level and an inline element. If display:block; makes your page layout go nuts, then use inline-block instead.