List within List Items?

HTML & CSS
1

Dear SitePoint Members

I have a small question. It’s specifically to do with producing validated code using nested list items. I know how to produce the code in unvalidated form. As it’s customary, I produce all my websites to XHTML 1.0 Strict, and won’t really use anything else.

As you can see code the code below…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>SitePoint Forum :: Nested List Items</title>

<style type="text/css">
<!--
  ol    {}
  ol ol {list-style-type:lower-alpha;}
  ol ol ol {list-style-type:upper-roman;}
-->
</style>
</head>
<body>

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
  <ol>
  <li>Nested Item 1</li>
	<li>Nested Item 2</li>
    	<ol>
        <li>Nested Nested Item 1</li>
  			<li>Nested Nested Item 2</li>
      </ol>
	<li>Back to Nested Item 3</li>
  </ol>
<li>Back to Item 4</li>	
</ol>

</body>
</html>

This code certainly does not validated. But I am wondering if there is any other way to do it using text instead of images, which would use this affect, but in validated format. If anybody knows it would be a great help.

Kind Regards,
Sega

2

The mark-up I use for my sitemap has the nested lists in a line item. eg.

<ul>
    <li><a href='./walk.php'><b>Walk Photos</b></a>
    <ul>
        <li>HAMPDEN COUNTY walks:
        <ul>
            <li><a href='./walk/mt.php'>Mount Tom</a></li>
            <li><a href='./walk/gpt.php'>360&deg; view from Goats Peak Tower</a></li>
            <li><a href='./walk/lpv.php'>Lower Pioneer Valley</a>
            <ul>
                <li>Holyoke Community College Trail</li>
                <li>Stebbins Wildlife Refuge - Longmeadow</li>
                <li>Provin Mountain - Agawam</li>
            </ul></li>
        </ul></li>
        <li><a href='./walk/ct.php'>CONNECTICUT walks:</a>
        <ul>
            <li>Bigelow Hollow State Park</li>
            <li>Metacomet and Monadnock Trail</li>
        </ul></li>
        <li>UPPER PIONEER VALLEY walks:
        <ul>
            <li><a href='./walk/hr.php'>Holyoke Range</a></li>
            <li><a href='./walk/fc.php'>Franklin County</a>
            <ul>
                <li>Mount Sugarloaf</li>
                <li>Leverett Buddhist Temple</li>
                <li>Bear Swamp</li>
            </ul></li>
            <li><a href='./walk/gfd.php'>Greenfield</a></li>
        </ul></li>
        <li>BERKSHIRE COUNTY walks:
        <ul>
            <li><a href='./walk/mg.php'>Mount Greylock</a></li>
            <li>Apalachian Trail:
            <ul>
                <li><a href='./walk/at1a.php'>Day 1 part 1</a></li>
                <li><a href='./walk/at1b.php'>Day 1 part 2</a></li>
                <li><a href='./walk/at2a.php'>Day 2 part 1</a></li>
                <li><a href='./walk/at2b.php'>Day 2 part 2</a></li>
                <li><a href='./walk/at3a.php'>Day 3 part 1</a></li>
                <li><a href='./walk/at3b.php'>Day 3 part 2</a></li>
            </ul></li>
        </ul></li>
    </ul></li>
    <li><a href='./wild.php'><b>Wildflowers</b></a>
    <ul>
        <li><a href='./wild/april.php'>April in the yard</a></li>
        <li><a href='./wild/detail.php'>Detail</a> pages
        <ul>
3

The nested <ol>s must be WITHIN the parent <li>s, not nested within the parent <ol> outside the <li>s.

4

So to demonstrate:

Invalid nested lists:


<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
        <ol>
            <li>Nested Item 1</li>
            <li>Nested Item 2</li>
                <ol>
                    <li>Nested Nested Item 1</li>
                    <li>Nested Nested Item 2</li>
                </ol>
            <li>Back to Nested Item 3</li>
        </ol>
    <li>Back to Item 4</li>	
</ol>

Valid nested lists:


<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
        <ol>
            <li>Nested Item 1</li>
            <li>Nested Item 2
                <ol>
                    <li>Nested Nested Item 1</li>
                    <li>Nested Nested Item 2</li>
                </ol>
            </li>
            <li>Back to Nested Item 3</li>
        </ol>
    </li>
    <li>Back to Item 4</li>	
</ol>
5

Which sorts of sums up why people who think they are using ‘strict’ XHTML might be better reading up on it before they get all excited.

6

Such as that Internet Explorer doesn’t support XHTML?

7

IMHO, serving “real” vs. “fake” (standards mode vs. quirks mode) XHTML is more of a concern than serving Transitional vs. Strict.
Using doctype switching, you can server “real” XHTML (Content-Type: application/xhtml+xml) to browsers that support it, and “fake” XHTML (Content-Type: text/html) to browsers that don’t (i.e. IE).
That has demonstratable benefits. AFAIK, the only thing that separates Strict from Transitional is that it doesn’t contain mark-up that may someday be deprecated with no real improvement in rendering.

8

What, pray tell, are those ‘demonstrable benefits’? You can only use the subset of XHTML 1.0 described in Appendix C, which means you cannot use any features that XHTML offers over HTML. Besides, AFAIK Gecko browsers don’t support incremental rendering of XML documents, which may cause poorer perceived response time.

The presentational markup is already deprecated, and has been for over 10 years. Browsers still support it, since they must be able to render 10-year-old documents, but it’s deprecated nevertheless.

What really separates Strict from Transitional is the mindset. A Strict DTD emphasises and promotes better separation between content and presentation, which has major benefits for accessibility and maintenance.

9

By “demonstratable benefits” I was referring to rendering. If an XHTML page is served to a standards compliant browser as text/html, it can affect things like the box model and font size inheritance. http://www.w3.org/International/articles/serving-xhtml/
As for Strict vs. Transitional, you make a good point, one that I unfortunately too often forget about. Although there are no rendering differences that I know of, for accessibilty and maintenance there are improvements. Reason enough.