-1

I am trying to write code that will list different automobiles in three different ordered lists with three different colored backgrounds ( using document style CSS). The lists are compact, midsize, and sport. I have my ordered list working correctly--except I can't get my colors to work. Can someone tell me what I am doing wrong

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>multi-colored background</title>
      <style type = "text/css">


      ol {list-style-type: upper-roman;}
      ol ol {list-style-type: upper-alpha;}
      ol ol ol {list-style-type: decimal:}


      p.compact{background-color: pink;}
      p.midsize {background-color:blue;}
      p.sport {background-color: red;}




   </style>
   </head>


	<h2>Automobile Types </h2>
	<ol>

	<p.class = "compact">
	  <li><h3>Compact</h3>
		<ol>
		<li><h4>Two Door</h4>
		<ol>
							               <li>Dodge Neon</li>
							               <li>Chevy Cobalt</li>
							               <li>Ford Focus</li>
		</ol>
		</li>
		<li><h4>Four Door</h4>
		<ol>
							               <li>Dodge Neon</li>
							               <li>Chevy Cobalt</li>
							                <li>Ford Focus</li>
	        </ol>
	    </li>
	   </ol>
	< /li><br />
	</p>

	<p class = "midsize">
	<li><h3>Mid Size</h3>
	<ol>
	<li><h4>Two Door</h4>
	<ol>
							<li>Chrysler Serbring</li>
							<li>Dodge Caliber</li>
							<li>Dodge Charger</li>
	</ol>
	</li>
	<li><h4>Four Door</h4>
	<ol>
							<li>Dodge Stratus</li>
							<li>Dodge Intrepid</li>
							<li>Chrysler Concord</li></p>
	</ol>
	</li>
	</ol>
	</li><br />
	</p>

	<p class = "sport">
	<li><h3>Sports</h3>
	<ol>
							<li><h4>Coupe</h4>
	<ol>
							<li>Dodge Viper</li>
							<li>Dodge Charger</li>
							<li>Chevy Camero</li>
	</ol>
	</li>
	<li><h4>Convertible</h4>
	<ol>
							<li>Dodge Viper</li>
							<li>Ford Mustang</li>
							<li>Chevy Corvette</li></p>
	</ol>
	</li>
	</ol>
	</li>
	</p>


   </body>
</html>

Edited by tmoney7566: n/a

3
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by josephajain
0

A <p> element cannot contain another block-level element. A <p> is implicitly ended when another block-level element is encountered. Add the colours to the <ol>s directly.

Edited by cfajohnson: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.