XHTML validity question

Factual Questions
1

I had a bulletted list like this:



<ul>
<li>Foo</li>
<li>Bar</li>
<ul>
<li>indentification</li>
<li>more indentification</li>
</ul>
<li>Baz</li>
</ul>

Apparently the W3C XHTML Validator did not like that. I had to make the nested <ul> part of an <li></li> to get it to work. The problem is that renders as having two bullets next to each other on the first nested line, which is ugly. It will be especially ugly when I write the complete list which will be nested many layers.

Anyone know how to get it to render the way I want – with only one bullet per line, while maintaining W3C validity?

2

It depends on your goal. I admit that I am more concerned with what works with the current browsers then how it complies with the standards so take this advice for what it is worth. Now, if I were actually programming the browsers then that would be a different story, but my customer’s care about whether it works, not whether it complies with some standard.

In my opinion, XHTML is really best used with an XML document and an Extended Style Sheet (XSL). The XSL page will contain all the formatting and the XML page will contain all the data. Regardless, if you just want this XML to display in a browser as you envision it there are a couple of solutions that I found although I am sure there are others.

The code below uses the margin style property to create indention rather than relying on <ul> to understand that this list is nested inside of another <ul> tag. This will display correctly in both Internet Explorer 6.0 and Mozilla 1.1 and passes the XML validator except for the empty header tag, which I assume you don’t have. You can obviously increase the margin for more nesting.

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
</head>
<body>
<ul>
<li>Foo</li>
<li>Bar</li>
<li style=“margin-left:15px;”>indentification</li>
<li style=“margin-left:30px;”>more indentification</li>
<li>Baz</li>
</ul>
</body>
</html>

One issue, though, may be that you want to add a blank line after an indention section. To do this I added <br></br> (IE ignored a single <br />) after the ‘more identification’ ul and this correctly added the blank line in both of the browsers mentioned above. Of course the validator hates this.

So the question is whether you want to comply with XHTML strict or just make your data display the way you want in the browsers you expect to be used to see it.

If the data is dynamic, then I strongly suggest you look into the XSL/XML solution so you can separate your formatting from the data. That way the XSL could read the data to determine nesting and set the styles appropriately based on the information in the XML.

I hope this helps.

3

Wahoo! You da man.

(Or woman, as the case may be.)