melbourne chapter

Ever wanted to have your own stylised numbers in an ordered list? Well using CSS alone this is impossible - as far as i know - but with the help of PHP and list-style-image we can indeed use our own stylised numbers. Anyway here’s how I do it:

<ol>
< ?php
 
var $pets = array('dog', 'cat', 'fish');
 
for($i = 1; $i <= count($pets); $i++) {
echo '
  <li>'.$pets[$i-1].'
';
}
?>
</ol>

Of course you could use something other than a list like this , but that’s not semantic is it? Using the method above will mean even when the user has CSS disabled or images for that matter there will still be numbers!

AMENDUM

Well it appears I am wrong, there is a way of styling ordered lists in purely CSS and it’s so damn simple i cannot believe i overlooked it - Thanks to stylizedweb.com for this snippet and Craig for pointing it out!

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
<ol>
  <li>
This is line one</li>
  <li>
Here is line two</li>
  <li>
And last line</li>
</ol>