Array Studio Reading List - a list of useful books

Make OL list start from number different than 1 using CSS 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.