Nested list in Table format will not work

Question

nikc121 0 Newbie Poster

15 Years Ago

ok, Two days up till 2am trying to figure this out. For some reson my Code for a nested list using a table layout will not show the Roman numerals I,II,II they are only showin I. Please Help.. The top half of the page is a table based layout, the bottom is a DIV based layout. I also need it to validat in Strict, xhtml, And so far i have about 36 errors. Any help would be greatly apprecited. Ihave also attachted the .css. I cannot have any inline stles.

<?xml version="1.0" encoding="UTF-8" ?>	
<!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">

<head>
<!-- 
   Programming the World Wide Web
   Week Number 2
   Cars Table V/s Div

   Divs V/S Table
   Author: Ellen Brady
   Date:   September 15, 2010

   Filename:         cars.html
   Supporting files: format.css, final.jpg
-->
<title>Cool Cars</title>

<link href= "./styles/format.css" rel= "stylesheet" type= "text/css" />

</head>

<body>

<h1>Web Exercise 1 - Part I</h1>
<h2>Using external validated CSS and validated XHTML compliant code to create a nested ordered list, with table and inserted image</h2>

<table class="cars">

<tr>

   <td>

<span id="orange">
 <ol>  

           	  <li>Compact
<ol>		
		  <li>Two Door</li>
<ol>
              		<li>Honda Civic </li>
   			<li>Toyota RAV 4 </li>
   			<li>Volvo C30 </li>
	</ol>
	</li>

                  <li>Four Door</li>
	<ol> 
             		<li>Mazda 3</li>
			<li>Inifiniti GT-R</li>
			<li>Chevrolet Cruze</li>

	</ol>
	</li>
	</ol>
	</li>		
</span>

<span id="green">
<ol>
		<li>Midsize</li>

		   <li>Two Door</li>
<ol>
			<li>Nissan Altima </li>
			<li>Mercury Milan </li>
			<li>Buick LaCrosse </li>
</ol>
</li>
		<li>Four Door</li> 
	<ol>
			<li>Chrysler Sebring </li>
			<li>BMW 3</li>
			<li>Toyota Camry</li>
	</ol>
	</li>
	</ol>
	</li>
	
</span>	

<span id="red">  

    		<li>Sports</li> 
<ol> 
        	   <li>Coupe</li> 
<ol> 

              		<li>Hyundai Genesis</li>   
                 	<li>Peugeot RCZ </li> 
             		<li>Acura ZDX </li>  
</ol> 
</li> 
    		 <li>Convertible</li>  

<ol>

       			<li>Chevrolet Corvette</li>   
         		<li>Porsche Boxster </li>  
         		<li>Jaguar XKR </li> 
</ol>
</li>
</ol>
</li>

</span>

</td>
<td><p><img src="./images/final.jpg" alt="Cool Car" /></p>
</td>

</tr>
</table>
<p>
<hr />
</p>

<h1>Web Exercise 1 - Part 2</h1>
<h2>Using external validated CSS and validated XHTML compliant code to create a nested ordered list, with Divs and inserted image</h2>

<div id="outterDiv">
    <div id="left">
        <ol type ="I">
            <span id="orange">
                <li>Compact</li>
                <ol type="A">
                    <li>Two Door</li>
                    <ol type="1">
                        <li>Honda Civic </li>
                        <li>Toyota RAV 4 </li>
                        <li>Volvo C30 </li>
                    </ol>
                    <li>Four Door</li>
                    <ol type="1">
                        <li>Mazda 3 </li>
                        <li>Inifiniti GT-R </li>
                        <li>Chevrolet Cruze </li>
                    </ol>
                </ol>
            </span>

            <span id="green">
                <li>Midsize</li>
                <ol type="A">
                    <li>Two Door</li>
                    <ol type ="1">
                        <li>Nissan Altima </li>
                        <li>Mercury Milan </li>
                        <li>Buick LaCrosse </li>
                    </ol>
                    <li>Four Door</li>
                    <ol type="1">
                        <li>Chrysler Sebring </li>
                        <li>BMW 3 </li>
                        <li>Toyota Camry </li>
                    </ol>
                </ol>
            </span>

            <span id="red">
            <li>Sports</li>
                <ol type="A">
                    <li>Coupe </li>
                    <ol type="1">
                        <li>Hyundai Genesis</li>
                        <li>Peugeot RCZ </li>
                        <li>Acura ZDX </li>
                    </ol>
                    <li>Convertible </li>
                    <ol type="1">
                        <li>Chevrolet Corvette</li>
                        <li>Porsche Boxster </li>
                        <li>Jaguar XKR </li>
                    </ol>
                </ol>
            </span>
        </ol>
    </div>

    <div id="right">
        <p><img src="./images/final.jpg" alt="Cool Car" width="500" length="700" /></p>
    </div>
</div>
<p>
    <a href= "../index.html">Home</a>
</p>
</body>
</html> THE FOLLOWING IS THE EXTERANL STYLE SHEET

h1	{text-align: center; color:red}
h2	{text-align: center; font-style: italic; font-size: 20px}
body	{background-color: antiquewhite}
ol 	 {list-style-type: upper-roman;}
ol ol 	 {list-style-type: upper-alpha;}
ol ol ol {list-style-type: decimal;}

.cars	{font-family: palatino linotype; width="100%"; cellspacing="2";}
#orange {color: orange}
#green   {color: green}
#red	{color: red}


#outterDiv { width: 1000px; height: 600px; }  
#right { float: right; width: 495px; height: 100%;}
#left { float: left; width: 495px;  height: 100%;}

html-css web-design

2 Contributors
1 Reply
284 Views
6 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by hielo

Dani AI

Generated 9 Months Ago

Short answer: the browser is “repairing” your broken markup, so each nested list becomes a separate one that restarts at I. is right to push validation and incremental rebuilding, but a few targeted fixes will get the roman numerals working predictably.

What to fix first

Correct the nesting: an ol/ul may only contain li as immediate children. Any nested ol must be placed inside the parent li. Invalid order/closing of li and ol is the root cause.
Stop wrapping block lists in inline elements: do not wrap ol in span. Put classes or ids on the li (or use a div) if you need coloring or layout.
Use classes (not repeated ids) when the same color is applied to multiple sections.

CSS and small gotchas to check

Fix the bad CSS syntax in .cars (use width: 100%; not width="100%";, and cellspacing is not a CSS property).
Keep styling in CSS: ol { list-style-type: upper-roman; } ol ol { list-style-type: upper-alpha; } works, but only when the HTML nesting is correct. If alignment looks off, try list-style-position: inside|outside to suit the layout.
Remove invalid attributes on images (e.g. length) and size via CSS or proper width/height.

Quick debug workflow

Put only a minimal table + one list in a new file. Validate it.
Add one nested level, validate again. Repeat until the problem reappears — that pinpoints the bad tag.
Use “View source” (to see what you wrote) and the DOM inspector (to see how the browser repaired it).

If you follow that incremental validation and move your styling to li classes (or to the list selectors), the roman numerals will display correctly.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

hielo 65 Veteran Poster · Answer 1 · 2010-09-18T11:00:09+00:00

first, start with "blank" html body - just the basic structure with nothing in the body.

Then add your table markup with EMPTY cells (<td>) and run it through the validator. If you did anything wrong, it should give you feedback as to what you did wrong. Once you have a valid table then continue to add the ordered list to the cells. Add the TOP-most list first and run it through the validator, fixing any errors before proceeding. Then add the second level list within the list item tag, and then run it through the validator, and fix any errors. Keep repeating this until you are finished nesting your lists.

Here's a pointer for you:
An <ol> is NOT allowed to have another <ol> as its immediate child - ex:

<ol>
   <li>...</li>
   <li>...</li>
   <ol><li>...</li></ol><!-- WRONG: ol cannot be an immediate child of another ol -->
</ol>

an <ol> (and <ul> ) can only have <li> as an immediate child. So if you want to nest <ol> it must be wrapped in an <li>

<ol>
   <li>...</li>
   <li>
     <ol><li>...</li></ol>
   </li>
</ol>

In your case, pay attention to lines 41 and 49. You close the <li> at the wrong spot, leaving the <ol> as an immediate child of another <ol>. This same error happens in other places as well.

Line 126 is also a problem. Again, an OL and UL can only have an LI as an immediate child, so the SPAN has no business there. These errors will picked up by the validator. That's why you are supposed to do the validation first.

Another tip. An inline element cannot have a block element. A SPAN is an inline element. A OL and UL (among others) are block elements. So line 162 is also a problem.

You need to learn keep an eye for the inline elements:
http://htmlhelp.com/reference/html40/inline.html

and make sure they do not contain block elements:
http://htmlhelp.com/reference/html40/block.html

Also, your document should start with:

<?xml version="1.0" encoding="UTF-8"?>
<!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">

So, seriously, start over from scratch, adding elements and validating incrementally.