Custom nested list numbering

[Tunny3]

Hi,

I'm working on a project that has many formal documents with nested lists. I'm using the following code to create the numbering for the respective list items:

<style type="text/css">
OL {counter-reset: item}
LI {display: block}
LI:before {content: counters(item, "."); counter-increment: item;}
</style>

<ol><li> . . . .
    <li> . . . .
    <li> . . . .
    <li> . . . .
    <li> . . . .
    <li> . . . .
    <li> . . . .
    <li> . . . .
    <li> . . . .
    <li> . . . .
    <li> . . . .
    <li> . . . .
    <li> . . . .
    <li><ol><li> . . . .
            <li> . . . .
            <li><ol><li> . . . .
            		<li> . . . .
            	</ol>
        </ol>

    <li> . . . .
</ol>

The numbering works perfectly in Firefox3, but the content starts directly after the number, so when you get to 9 then 10, the content blocks are not aligned.

This alignment seems to work great in IE7, but the numbering doesn't.

Here is this code in operation - EXAMPLE

If anyone could help, it really would save me tearing the rest of my hair out.

Many thanks,
Tim

[Tunny3]

I realise this isn't the most exciting of forum topics, but if anyone can shed some light, i'd really appreciate it.

I fear I may have to code it non-semantically otherwise which will really hurt.

Cheers,
Tim