Question

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

1. Main heading

   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

2. Main Heading

   2.1 Sub Heading

etc… etc…

I know that you can use nested OL’s but this does not render what I need as above

EDIT

Of course this is wonderful until IE popped its ugly head! (I have to wonder to myself what the developers over at Microsoft must think about the millions of complaints about their product.) I found this solution http://www.sitepoint.com/techy-treasures-5-fudging-css-counters-in-internet-explorer/ and have tried implementing it.

It works partly, 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 counter-increment property check this:

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, ".") ". "; }

An live example using this property can be found here

Related reading from the Opera dev site