Nesting list items within list items of an Ordered List ?

Question

I am attempting to figure out how to create an incremented ordered list currently aimed towards IE6 and IE7.

E.G. It should render something like below:

1.0
    1.1
    1.2
    1.3
2.0
    2.1
    2.2

From what I understand, this is possible to create in CSS with something like this:

UL, OL { counter-reset: item; }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

However, of course, IE6 and IE7 don't support this.

What options are available to create a proper incremented list in IE6/7? Am I stuck having to hard code this.? Unfortunately, using JavaScript is not an option.

Are there any updated methodologies for newer browsers?

Answer 1

XSLT (including XSLT 1.0) can generate multi-level numbering sequences with <xsl:number>.

Answer 2

Here is a CSS only solution (should work in IE8 and above):

<ol>
    <li>
        Heading
        <ol>
            <li>list</li>
            <li>list</li>
        </ol>
    </li>
    <li>
        Heading
        <ol>
            <li>list</li>
            <li>list</li>
        </ol>
    </li>
</ol>



ol{
    list-style-position:inside;
    list-style-type: none;
    counter-reset:mainNum;
}

ol li:before{
    content: counter(mainNum) ".0";
    counter-increment:mainNum;
}

ol ol{
    counter-reset:item;
}

ol ol li{
    list-style-type:none
}

ol ol li:before{
    content: counter(mainNum) "." counter(item) "  ";
    counter-increment:item;
}