tags:

views:

80

answers:

1

Hello. Is there something wrong with the following HTML, or am I simply experiencing a Firebug error? When I view the first list element in firebug, you'll see that firebug has difficulty correctly identifying the anchor; however, it has no problem with the second (outer) list element. If I remove the nested list from the first list element, then the problem disappears. Similarly, if I remove the outer list, the problem disappears. So, there appears to be a problem with placing an anchor around a nested list.

I've tried replacing the anchor with a div, and even a span, and firebug doesn't complain, so this seems to be anchor specific. I've also tried various doctypes, with no success.

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
  </head>
  <body>
    <ul>
      <li>
        <a href="http://whatever" style="display:block">
          <p>some text</p>
          <ul>
            <li>a list entry</li>
          </ul>
        </a>
      </li>
      <li>
        <a href="http://whatever"&gt;
           <p>more text</p>
        </a>
       </li>
    </ul>
  </body>
</html>
+1  A: 

The a element only allows inline-level elements as child elements. So the p element and ul element are not allowed there.

Gumbo
I wondered whether this was the problem. If it is, then there are some inconsistencies (why is there no problem if I replace the anchor with a span? And why is there still a problem if I wrap the contents in a div with its display set to inline?)
darasd
@darasd a span is an inline element, so is a div set to display:inline.
Bart S.
@Bart exactly. in the first case (replace anchor with span), I have an inline element containing block elements, but there is no problem. In the second place (wrap contents of anchor with inline div), I have an anchor containing an inline element, but the problem still exists.
darasd
Also, this doesn't explain why the problem disappears if I remove the outer (parent) list.
darasd