0

I've been working on doing some Sharepoint customisations for work, and I was trying to fix the nested OL numbering, when I came across this strange problem.

When you have multiple OL's on a page, and use the generally accepted solution for nested numbering (See: Html ordered list 1.1, 1.2 (Nested counters and scope) not working), the numbering continues on from the previous OL when the second OL is within a div tag.

<html>
<head>
    <style>
        ol { counter-reset: item; }

        ol > li{ display: block; counter-increment: item; }
        ol > li:before { content: counters(item, ".") " "; }
    </style>
</head>
<body>
    <ol>
        <li>One</li>
        <li>Two
            <ol>
                <li>Two One</li>
                <li>Two Two</li>
                <li>Two Three</li>
            </ol>
        </li>
        <li>Three</li>
        <li>Four</li>
    </ol>

    <div>
        <ol>
            <li>One</li>
            <li>Two
                <ol>
                    <li>Two One</li>
                    <li>Two Two</li>
                    <li>Two Three</li>
                </ol>
            </li>
            <li>Three</li>
            <li>Four</li>
        </ol>
    </div>
</body>

See http://jsfiddle.net/C5Cjp/ for an example.

I'm new to counters, so I'm curious to know why this functionality is working as it does in the example, and if there's an easy way to fix it so that the second unrelated OL's counter resets.

Community
  • 1
  • 1
user2990454
  • 1

1 Answers1

0

I'm have tested you code .Problem is with div tag .

Solution : 1.> Remove the div tag of 2nd ol list.

2.> Put both in ol list in div tag.

 <body>
    <div>
         <ol>
            <li>One</li>
            <li>Two
                <ol class="a">
                    <li>Two One</li>
                    <li>Two Two</li>
                    <li>Two Three</li>
                </ol>
            </li>
            <li>Three</li>
            <li>Four</li>

        </ol>
</div>


<div>
        <ol>
            <li>One</li>
            <li>Two
             <ol>
                    <li>Two One</li>
                    <li>Two Two</li>
                    <li>Two Three</li>
                </ol>
            </li>
            <li>Three</li>
            <li>Four</li>   
        </ol>
</div> 
</body>
SeeTheC
  • 1,560
  • 12
  • 14
  • Hi, I realise that the div tag is causing the issue- the problem is Sharepoint's WYSIWIG editor will randomly put things in div tags without much rhyme or reason. While I don't actually use the editor, my 100's of users will- so I need a solution that resolves the issue whether the content is within a div or not. I probably should have specified that in the question. – user2990454 Nov 14 '13 at 06:43