SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)

    List within List Items?

    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

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,226
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    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>

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The nested <ol>s must be WITHIN the parent <li>s, not nested within the parent <ol> outside the <li>s.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Such as that Internet Explorer doesn't support XHTML?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,226
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    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. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    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.

    Quote Originally Posted by Mittineague View Post
    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.
    Birnam wood is come to Dunsinane

  9. #9
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,226
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •