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.

List style IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
armenian
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Buggy Yes Yes Yes Yes
box
  • Test
  • Test
  • Test
  • Test
 No No No No Yes Yes
circle
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes Yes
decimal
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes Yes
decimal-leading-zero
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes Yes
disc
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes Yes
georgian
  • Test
  • Test
  • Test
  • Test
 No Yes Yes Buggy Yes Yes Yes Yes
lower-alpha
  • Test
  • Test
  • Test
  • Test
 Yes 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 Yes
List style IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
lower-latin
  • Test
  • Test
  • Test
  • Test
 No Yes 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 Yes
none
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes Yes
square
  • Test
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes Yes
upper-alpha
  • Test
  • Test
  • Test
  • Test
 Yes 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 no
upper-latin
  • Test
  • Test
  • Test
  • Test
 No Yes 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 Yes
List style IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a 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 IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
outside
  • Test
  • Test
  • Test
 No Yes Yes Yes Yes Yes Yes
inside
  • Test
  • Test
  • Test
 Yes Yes Yes Yes Yes Yes