HTML Ordered List Not Showing Subitems right

Question

The problem

I wanted to use the ordered list-type deal:

1
  1.1
  1.2

2
  2.1
  2.2

But when I got the code from here it does this for me:

1
  1.1
  1.1

2
  2.1
  2.1

So, it's not numbering off correctly.

---

The code

HTML

<ol id='doc'>
            <li>Test1
            <p>
            Test1-Detials
            </p>

                <ol>
                    <li>Test1.1
                        <p>
                        Test1.1-Detials
                        </p>
                    </li>
                </ol>

                <ol>
                    <li>Test1.2 (Displays as 1.1)
                        <p>
                        Test1.2-Detials
                        </p>
                    </li>
                </ol>
            </li>


            <li>Test2
            <p>
            Test2-Detials
            </p>

                    <ol>
                    <li>Test2.1
                        <p>
                        Test2.1-Details
                        </p>
                    </li>
                </ol>

                      <ol>
                    <li>Test2.2 (Displays as 2.1)
                        <p>
                        Test2.2-Details
                        </p>
                    </li>
                </ol>
            </li>
        </ol>

All the HTML looks correct to me.

CSS

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item; text-decoration: underline; color: blue; font-size: 20px;}

I copied that strit from the link, and added a little bit to li:before:

 text-decoration: underline; color: blue; font-size: 20px;

If there is any other way, jQuery / JavaScript route I would be happy to take that instead, but it there is a CSS answer, I would be willing to take that too.

Answer 1

Your problem is that you are creating two child lists instead of one with multiple elements.

See http://jsfiddle.net/35kjA/ for the fixed solution.

In essence your inner list should be:

<ol>
    <li>Test1.1
        <p>
        Test1.1-Detials
        </p>
    </li>

    <li>Test1.2 (Displays as 1.1)
        <p>
        Test1.2-Detials
        </p>
    </li>
</ol>