Ordered List CSS2

Forum Moderators: not2easy

Message Too Old, No Replies

Ordered List CSS2

Mutiple OL

fathom

3:39 pm on Nov 7, 2006 (gmt 0)

Attempting to make an ordered list with 5 levels

1. Para

a. sub-para
b. sub-para

2. Para

a. sub-para
b. sub-para

i. sub-sub-para
ii. sub-sub-para

3. Para

etc.

...but counter resets so rather Para 2., 3. it becomes 1. again

In CSSol.a { list-style-type: decimal; 
padding:6px 6px 6px 6px}
ol.b { list-style-type: lower-alpha; 
padding:6px 6px 6px 24px}
ol.c { list-style-type: lower-roman; 
padding:6px 6px 6px 48px}
ol.d { list-style-type: lower-alpha; 
padding:6px 6px 6px 72px}
ol.e { list-style-type: lower-roman; 
padding:6px 6px 6px 96px}

Ideas?

Fotiman

4:03 pm on Nov 7, 2006 (gmt 0)

I suspect you're just not constructing your lists properly. Make sure you are nesting the sub levels within the parent <li>. Also, no need for all those classes, just use decendant selectors. Here's an example that works:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset:utf-8"> 
<title>Nested List example</title> 
<style type="text/css"> 
ol { list-style-type: decimal; 
padding:6px 6px 6px 6px} 
ol ol { list-style-type: lower-alpha; 
padding:6px 6px 6px 24px} 
ol ol ol { list-style-type: lower-roman; 
padding:6px 6px 6px 48px} 
ol ol ol ol { list-style-type: lower-alpha; 
padding:6px 6px 6px 72px} 
ol ol ol ol ol { list-style-type: lower-roman; 
padding:6px 6px 6px 96px 
</style> 
</head> 
<body> 
<ol> 
 <li>Para 
  <div> 
   <ol> 
    <li>sub-para</li> 
    <li>sub-para</li> 
   </ol> 
  </div> 
 </li> 
 <li>Para 
  <div> 
   <ol> 
    <li>sub-para</li> 
    <li>sub-para 
     <div> 
      <ol> 
       <li>sub-sub-para</li> 
       <li>sub-sub-para</li> 
      </ol> 
     </div> 
    </li> 
   </ol> 
  </div> 
 <li>Para</li> 
</ol>  
</body> 
</html>

fathom

5:03 pm on Nov 7, 2006 (gmt 0)

Ya ok... got a little confused... should have gone to bed! ;)