Make OL list start from number different than 1 using CSS
Posted By Predrag on August 31, 2006
If you need to create an OL list that starts from number different than 1, here is an elegant solution. This is very useful if you need to display a listing on more pages (eg. there are 100 search results, and you want to display 10 results per page). In this case, if you are using OL list, it will start from number 1 on every page, and that is not a good solution because it will look like this:
In order not to use deprecated < ol start=”6″ > parameter in my second list, we’ve searched the Web for an adequate solution which complies with W3C standards - and we found it.
You need to write the following in your CSS:
OL#page_one { counter-reset: item }
OL#page_two { counter-reset: item 5 }
LI { display: block }
LI:before {
content: counter(item) ". ";
counter-increment: item;
display:block;
}
And, this is how your lists should be defined:
<ol id="page_one"> <li>Division Bell</li> <li>Atom Hearth Mother</li> <li>Relics</li> <li>Dark Side of the Moon</li> <li>Wish You Were Here</li> </ol><ol id="page_two"> <li>The Wall</li> <li>More</li> <li>Piper at the gates of Dawn</li> <li>Final Cut</li> <li>Meddle</li> </ol>
These fieldsets represent separate pages, of course. Now, our lists look as we wanted them to look in the first place:
Let’s explain what happened here: if you set this CSS rule: OL {counter-reset: item 2;} your list will start from 3 (value is set to 0 by default, and list by default starts from 1). From some reason, you need to set LI:display:block; if you don’t do this, numbers won’t appear at all.
All you need to do now is to dynamically change the value in your counter-reset rule. You can do it in PHP, ASP, CF, etc…
li:before rule is used for defining the appearance of the number in your OL list. If you set display:block inside of li:before, you can create some great looking and also 100% clean CSS stuff.
Now, there is a twist in the tale - even though this rule is specified in W3C CSS2 standard (with even more great solutions, that will make XHTML coder’s live easier), IE 6 completely ignores these rules! However, in the Amazon Search created in Ruby example, created by my colleague, you can see how IE6 ignores the rule, but search results appear correctly, and the whole appearance looks acceptable. However, if you use Firefox, you’ll see our OL list in its full glory.
About the author
[...] Muy buen artículo para conseguir enlazar esas listas numéricas que por separado nunca nos cuadran los números. Ahora, aunque sea para Firefox únicamente (IE lo ignora) podremos hacer que nos números cuadren. [...]
Enlaza listas numeradas usando CSS…
En este artículo [en inglés] nos explican cómo enlazar las listas numéricas con CSS que por separado nunca nos cuadran los números. Si necesitas crear una lista numerada que empiece por un número diferente de 1, aqui tienes una solución elegante…
Making ’start’ from the ol tag and ‘value’ from the LI tag deprecated parameters was a mistake.
The number that a list starts at is meaning and not style. Putting it in the style sheet is going to create a lot of bloated style sheets. We have loads of ordered lists that span many pages. I don’t want to create separate styles for all of them.
I’m not following the W3C on this one. It’s just compliance for compliance sake.
Richard, I must say I agree with you on this one. They shouldn’t be deprecated, but since they are, I was verry happy to see that there is a fine solution.
Not awesome though, but it works.
This is much easier:
makes this list item number 30.
makes this list item number 40.
makes this list item number 41.
Well that is a good solution. I am glad I found this
This is not working on IE7? How can I make tweak this to make it work for IE7?
I was hoping this would be the solution to my problem, but going through the source code of this page I find that the start attribute is used in your working example. I tried removing the start attribute and the solution doesn’t work in neither IE or Firefox. I agree that this is how it should work, accordin to the CSS 2.1 Specification, but it seems web browsers have no support for it?
Maybe I am just dumb, but my solution would be to just remove the of the previous sequence of numbered list items and remove the of the next sequence of numbered list items, and you get your continuous numbering. (Often your “sequence” contains only one list item before another style “breaks” the sequence, typically a continue-type style.) I know that you then have all your other elements, e.g. , inside the list, but so far so good for me. Would this solution cause problems?
Any other solutions for this?
Also isn’t this a CSS issue and not really so much a RoboHelp issue?