ol>li numbering gets messy

Question

I am using ol>li in an HTML file, added styling to it to use the hierarchical numbering like 1, 1.1,1.2, 1.2.1 etc. It works perfectly fine sometimes, but sometimes the numbering gets messy. Instead of starting with next number, it continues the same hierarchy. Refer the attached image, instead of using number 3, the numbering continues as 2.6 and then uses 2.6.1 and so on

here is my css -

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0
}
ol>li {
  display: table;
  counter-increment: item;
  margin-bottom: .6em
}
ol>li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: .3em;
  font-size: 14px;
}
li ol>li {
  margin: 0
}
li ol>li:before {
  content: counters(item, ".") " "
}
li ol>li:before {
  content: counters(item, ".") " ";
  font-size: small
}

<ol>
    <li>List Item 1
        <ol>
            <li>Indented List Item 1</li>
            <li>Indented List Item 2</li>
            <li>Indented List Item 3</li>
        </ol>
    </li>
    <li>List Item 2
        <ol>
            <li>Indented List Item 1</li>
            <li>Indented List Item 2</li>
            <li>Indented List Item 3</li>
        </ol>
    </li>
    <li>List Item 3
        <ol>
            <li>Indented List Item 1</li>
            <li>Indented List Item 2</li>
            <li>Indented List Item 3</li>
        </ol>
    </li>
    <li>List Item 4
        <ol>
            <li>Indented List Item 1</li>
            <li>Indented List Item 2</li>
            <li>Indented List Item 3</li>
        </ol>
    </li>
</ol>

Possible duplicate of [How can I reset a CSS-counter to the start-attribute of the given list](https://stackoverflow.com/questions/23699128/how-can-i-reset-a-css-counter-to-the-start-attribute-of-the-given-list) — Selvam Elumalai, Jun 04 '18 at 10:52
Can you say anything about when it gets messy? After refreshing, doing things with JavaScript, changing CSS, viewing the page on a different device, zooming in or out etc? — Mr Lister, Jun 04 '18 at 11:59
Nope. On one refresh it works, on another, it doesn't. There is no pattern what so ever! — Darshan Mane, Jun 04 '18 at 18:52

score 1 · Answer 1 · answered Jun 04 '18 at 10:52

1

Here is clean code

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

 <ol>
  <li>one</li>
  <li>two
  <ol>
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
     </li>
  <li>three 
  <ol>
   <li>three.one</li>
   <li>three.two</li>
    <ol>
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </ol>
     </li> 
  <li>
  four
  <ol>
     <li>Four.one</li>
     <li>Four.two</li>
    </ol>
  </li>
  </ol>

answered Jun 04 '18 at 10:52

Ram kumar

3,152
6
32
49

What browser are you using ? As the snippet seems to work just fine. – Martin Jun 04 '18 at 10:54
I am using chrome and ff now. But it should work on all browser – Ram kumar Jun 04 '18 at 10:58
https://jsfiddle.net/webdevkumar/n2we7220/1/ – Ram kumar Jun 04 '18 at 10:59
1

Both the snippet and thee fiddle you posted are working fine for me (Firefox) – Martin Jun 04 '18 at 11:05
Cool... Happy coding mate – Ram kumar Jun 04 '18 at 11:06
Then upvote the answer mate – Ram kumar Jun 04 '18 at 11:08
The problem is, my code works in most cases, but sometimes it doesn't. and there are no differences in code, environment, network and browser. – Darshan Mane Jun 04 '18 at 11:28
hmmm.. Maybe css reset or initialization etc.... – Ram kumar Jun 04 '18 at 11:31
@DarshanMane If you can't provide a [mcve], I'm afraid there's not much we can do you help you. – Mr Lister Jun 04 '18 at 11:31
@MrLister you are right mate – Ram kumar Jun 04 '18 at 11:50
I thought HTML code would not be needed; but anyway, I have updated the question and not it contains the css as well as HTML code. – Darshan Mane Jun 04 '18 at 11:51
@DarshanMane Now we understand mate... Happy coding once again – Ram kumar Jun 04 '18 at 11:53

ol>li numbering gets messy

1 Answers1