Haxing4Life
New Member
I'm struggling with counter-reset, the reset appears to be applying but then the following values seem to increment based on the value prior to the reset.\[code\]<head><style>ol.list-number2{ text-indent:10px; }ol{ list-style-type: decimal;}ol > li{ display:inline;}/* Set the base count at 0 */body{ counter-reset:first 1 second 1;}/* Reset the count when the start class is available */ol.list-start-number1:before{ counter-reset: first 0 second 0;}ol.list-start-number2:before{ counter-reset: second 0; }/* Prepend the ols with the counter and increment the counter */.list-number1:before{ content:counter(first) ". "; counter-increment: first 1;}.list-number2:before{ content: "1." counter(second) ". "; counter-increment: second 1;}</style></head><body> <div id="magicdomid25" class="ace-line"> <ol class="list-start-number1 list-number1"><li><span class="a9z">test</span></li></ol> </div> <div id="magicdomid21231236" class="ace-line"> <ol class="list-start-number2 list-number2"><li><span class="a9z">tesdfsdfsting</span> </li></ol> </div> <div id="magicdomid31231230" class="ace-line"> <ol class="list-number2"><li><span class="a9z">tessdfsdftyy</span></li></ol> </div> <div id="magicdomid26123" class="ace-line"> <ol class="list-number2"><li><span class="a9z">tessdfsdfting</span></li></ol> </div> <div id="magicdomid30" class="ace-line"> <ol class="list-number1"><li><span class="a9z">testyy should be two!</span></li></ol> </div> <!-- First list has ended --> <div id="magicdomid30" class="ace-line"> <span>FEAR ME foo I am the resetter of counters</span> </div> <!-- Second list begins --> <div id="magicdomid25" class="ace-line"> <ol class="list-start-number1 list-number1"><li><span class="a9z">I should be 1</span></li></ol> </div> <div id="magicdomid25" class="ace-line"> <ol class="list-start-number2 list-number2"><li><span class="a9z">I should be 1.1</span></li></ol> </div> <div id="magicdomid25" class="ace-line"> <ol class="list-number2"><li><span class="a9z"><b>I should be 1.2 but I'm not! 
</b></span></li></ol> </div> <div id="magicdomid25" class="ace-line"> <ol class="list-number2"><li><span class="a9z"><b>I should be 1.3 but I'm not! </b></span></li></ol> </div> <div id="magicdomid25" class="ace-line"> <ol class="list-number1"><li><span class="a9z"><b>I should be 2 but I'm not</b></span></li></ol> </div></body>\[/code\]Fiddle: http://jsfiddle.net/E8XFK/85/I assume I'm misunderstanding how counter inheritance works?Modifying the DOM isn't an option here.
</b></span></li></ol> </div> <div id="magicdomid25" class="ace-line"> <ol class="list-number2"><li><span class="a9z"><b>I should be 1.3 but I'm not! </b></span></li></ol> </div> <div id="magicdomid25" class="ace-line"> <ol class="list-number1"><li><span class="a9z"><b>I should be 2 but I'm not</b></span></li></ol> </div></body>\[/code\]Fiddle: http://jsfiddle.net/E8XFK/85/I assume I'm misunderstanding how counter inheritance works?Modifying the DOM isn't an option here.