Warning: file_get_contents() [function.file-get-contents]: open_basedir restriction in effect. File(/var/www/vhosts/iacons.net/subdomains/lab/httpdocs/styling-the-list-numbers/coloured.txt) is not within the allowed path(s): (/var/www/vhosts/iacons.net/httpdocs:/tmp) in /var/www/vhosts/iacons.net/httpdocs/wp-content/plugins/code-viewer.php on line 37

Warning: file_get_contents(/var/www/vhosts/iacons.net/subdomains/lab/httpdocs/styling-the-list-numbers/coloured.txt) [function.file-get-contents]: failed to open stream: Operation not permitted in /var/www/vhosts/iacons.net/httpdocs/wp-content/plugins/code-viewer.php on line 37

Warning: file_get_contents() [function.file-get-contents]: open_basedir restriction in effect. File(/var/www/vhosts/iacons.net/subdomains/lab/httpdocs/styling-the-list-numbers/parenthesis.txt) is not within the allowed path(s): (/var/www/vhosts/iacons.net/httpdocs:/tmp) in /var/www/vhosts/iacons.net/httpdocs/wp-content/plugins/code-viewer.php on line 37

Warning: file_get_contents(/var/www/vhosts/iacons.net/subdomains/lab/httpdocs/styling-the-list-numbers/parenthesis.txt) [function.file-get-contents]: failed to open stream: Operation not permitted in /var/www/vhosts/iacons.net/httpdocs/wp-content/plugins/code-viewer.php on line 37

I am back with another post in the styling with CSS series. Have you ever tried to style the number of an ordered list? While the replacement of the default bullets is too obvious (list-style-image does the trick), the method of styling list numbers is not. What follows is a demonstration of how this can be achieved by two methods: a) the quick-and-dirty and b) the modern way.

Let’s start with the quick and dirty way, a well-known method which is oddly supported by all browsers, including the little naughty ΙΕ6. The idea behind this method is to apply a set of the desired formatting rules on the li tag and wrap its contents with a block element; div is usually the tag of choice. The last step is to restore the default typography and colours for the wrapper. Unfortunately, it seems that this method does not work with background property. I have prepared some examples for illustration purposes. The following is a CSS example of turning list numbers into red.

[The requested file could not be found]

On the other hand, the modern way is more complicated but more powerful. It is more powerful because you can not only change the colour or the font family, but you can change the content as well. For example, you can get rid of that dot and replace it with a nice parenthesis. Of course, as one might expect this does not work in all browsers; in fact it works only in Opera! This method is a part of the CSS2 specification, under the Markers and Lists section. Again, I have prepared some examples for you. As I have mentioned, this works only in Opera (Firefox fails to increase the counter it can be solved via counter-reset property ) but I would like to hear about other modern browsers behaviour. The following is the mentioned example of parenthesis:

[The requested file could not be found]

Well, that’s all! I hope you’ve enjoy it