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 SHEETh1 {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%;}