Formatting a legal document using CSS UL / OL

Question

Is there a way in HTML / CSS to format a legal document that should remain the same as the original document format. In other words.

• Main title

  1.1 Sub Heading

  1.2 Sub Heading

  1.3 Sub Heading

  1.3.1 Sub Sub Heading 1.3.2 Sub Sub Heading 

  1.4 Sub Heading

• Main section

  2.1 Sub Heading

etc. etc.

I know that you can use nested OL, but this does not display what I need as above

EDIT

Of course, this is great until IE popped out with its ugly head! (I need to wonder what Microsoft developers should think of millions of complaints about their product.) I found this solution http://www.sitepoint.com/techy-treasures-5-fudging-css-counters-in-internet- explorer / and tried to implement it.

This works in part, but I have no idea how to use this expression correctly:

  #css-counters-test li { zoom: expression( (typeof step == "undefined" ? step = 1 : step++), this.innerHTML = (typeof this.processed == "undefined" ? ("<span class=before>" + step + ": </span>") : "") + this.innerHTML, this.processed = true, this.runtimeStyle.zoom = "1" ); } 

Answer 1

For this type of functionality, you can use the counter-increment property:

HTML

 <ol> <li>item 1 <ol> <li>sub item 1 <ol> <li>sub-sub item 1</li> <li>sub-sub item 2</li> <li>sub-sub item 3</li> </ol> </li> <li>Sub item 2</li> </ol> </li> <li>item 2</li> </ol> 

CSS

 ol { counter-reset: section; list-style-type: none; } ol ol ol{background:#c0c0c0; padding-left:10px;} ol li { counter-increment: section; } ol li:before { content: counters(section, ".") ". "; } 

A live example using this property can be found here.

Related reading from Opera developer site

Answer 2

you have the right idea, just use {content:;} and {counter:;}

Live example can be found here.