List within List Items?

**Sega** · Aug 27, 2008 13:04

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...

Code:

<!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

**Mittineague** · Aug 27, 2008 14:44

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

HTML Code:

<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>

**Centauri** · Aug 27, 2008 16:29

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

**paul_wilkins** · Aug 27, 2008 16:59

So to demonstrate:

Invalid nested lists:

Code html4strict:

<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:

Code html4strict:

<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>

**Hugh Miller** · Sep 1, 2008 17:21

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.

**paul_wilkins** · Sep 1, 2008 18:01

Such as that Internet Explorer doesn't support XHTML?

**Mittineague** · Sep 1, 2008 19:44

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.

**AutisticCuckoo** · Sep 1, 2008 22:47

Originally Posted by Mittineague

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.

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.

Originally Posted by Mittineague

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.

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.

**Mittineague** · Sep 2, 2008 10:34

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.

User Tag List

Thread: List within List Items?

Thread Tools

Display

List within List Items?

Bookmarks

Bookmarks

Posting Permissions