Can you make an ordered list count down instead of up?

Or, can you set the value for each <li> so you can make a top ten list (which should go from 10 -> 1 instead of 1 -> 10) ?

 

Yes it is possible. It is not defined by the standards, but I found one nice workaround for you, look here: http://paularmstrongdesigns.com/weblog/css/reverse-ordered-lists

 

Thanks I just found this and it works rather well:

<ol id="reverse_numbering">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ol>
<script type="text/javascript">
var reverse=document.getElementById('reverse_numbering');
reverse.style.listStyle='none';
var li=reverse.getElementsByTagName('li');
for(var i=0; i<li.length; i++)
{
li.insertBefore(document.createTextNode(li.length-i+'. '), li.firstChild);
}
</script>

The only problem with this code is that if you have lists embedded with a smaller list, it counts incorrectly, so placement of the javascript (after the last <li> is important).

Here it is in action

http://www.mediaflyboy.com/top-10-zombie-movies

Pretty simple and effective!

 

What you ask is covered by a simple css property set, generated content and automatic numbering. All modern browsers have support. Trouble is, IE is not a modern browser. You could put the javascript in a conditional comment, feeding it to IE only. If the javascript is disabled, only IE users will feel the pinch.

cheers,

gary

 

A little negative text-indent might make this look a little more like a proper ordered list

Nice piece of code!