Strict XHTML and Unordered Lists

Factual Questions
1

Why doesn’t thisstrict <xhtml> web page pass the W3C.org Validator?

2

This is the first of 11 errors.

Line 14, Column 5: document type does not allow element “ul” here; missing one of “object”, “ins”, “del”, “map”, “button” start-tag.

<ul>

The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.

3

I don’t know. Your example looks identical to the ‘correct’ nested list example here:
http://www.w3schools.com/xhtml/xhtml_html.asp

-However, I must be overlooking something obvious, as I replaced your nested lists with a C&P of the code on that page and it validated OK…

4

I have an ending <ul> instead of </ul>.
Now I’ll start splicing my real index.html into listindex.com until I find the error.
<body>
<p>
Items
<ul>
<li>SubItem</li>
<li>SubItem
<ul>
<li>SubSubItem</li>
<li>SubSubItem</li>
</ul>
</li>
<li>SubItem</li>
<ul>
</p>
</body>

5

Its the <p> tags. Without the <ul> instead of </ul> at the end of the list and without the <p> and </p> it passes.

6

Do you need the <p> tags? Can you put it inside a <div> instead?

7

Yes but the formating is different. Within the <p></p> the items are spaced further apart.

8

Could that be overcome in your CSS? - something like:

.spaciouslist {
line-height: 140%
}

Then:

<div class=“spaciouslist”>
[your nested lists]
</div>

9

I believe you should close the </li> before opening the <ul>


<li>List item</li>
 <ul>
 <li>New list item</li>
 </ul>
<li>Next list item</li>

And, of course, lose the P tags. Use a DIV with an ID if you need to specifically address that one list, and put a line-height on the LI styling within that ID. Otherwise just don’t bother.

10

Actually, I’m still a bit wet behind the ears with CSS… if you want all lists to be a bit more spacious, couldn’t you just modify the way the <li> tag works by putting:

li {
line-height: 140%
}

in the CSS?