List styles

You can give quite detailed instructions on the appearance of list items, concerning the bullets or other markers and their position.

list-style-type

The list-style-type declaration allows you to define the type of the list marker. The table below gives compatibility information on values that are supported by at least one browser.

Value IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
armenian
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Buggy Yes Yes Yes
box
  • Test
  • Test
  • Test
  • Test
 No No No Yes Yes
circle
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
decimal
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
decimal-leading-zero
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes
disc
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
georgian
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Buggy Yes Yes Yes
lower-alpha
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
I don't understand the difference between alpha and latin.
lower-greek
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes
Value IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
lower-latin
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes
I don't understand the difference between alpha and latin.
lower-roman
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
none
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
square
  • Test
  • Test
  • Test
  • Test
 Yes box Yes Yes Yes Yes
IE8b1 uses the symbol that other browsers use for box.
upper-alpha
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
I don't understand the difference between alpha and latin.
upper-greek
  • Test
  • Test
  • Test
  • Test
 no Yes no no no no
upper-latin
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes
I don't understand the difference between alpha and latin.
upper-roman
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes
Value IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7

Unsupported values

CSS 3 defined other values that are not yet supported by any browser. Below is an overview; as soon as browsers start to support a value I'll move it to the table above.

CSS3 adds many alphabets, but seems to focus on odd ones. I'm missing Cyrillic, Arab and Hebrew, which have quite large user bases, while the spec does mention tons of obscure Ethiopian and Caucasian alphabets.

If we must support lots of vague alphabets anyway, W3C should add futhark (Germanic runes) and ogham (old Celtic script). It would make ancient historians very happy.

For testing purposes I restricted myself to the European values, because these are the only ones I can check. There's little difference between the Norwegian and the standard Latin alphabet, except for a few extra letters. I'm a little disappointed that even a Norwegian browser famed for its CSS support doesn't support the Norwegian values.

list-style-image

It is also possible to use an image instead of a marker. This is supported by all browsers, though there are some minor incompatibilities in the <li> height. Does this height have to be adjusted for the image? Explorer and Opera don't; Firefox, Safari and iCab do.

list-style-position

Finally, what position should the list marker have. W3C defined inside and outside. Outside is the normal behaviour in most browsers, while inside means that the marker should be an inline element, inside the margin, so that the text may wrap below it.

list-style-position IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Safari 3.0 Win Opera 9.5b Konqueror 3.5.7
outside
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes
inside
  • Test
  • Test
  • Test
 Yes Buggy Yes Yes Buggy Yes
IE8 and Opera give the <li> a too-narrow width (I didn't define any width in the CSS, so they should just stretch.) In addition, IE8b1 applies overflow: hidden.