Skip to: content, navigation

list-style (CSS property)

Spec
Inherited Initial Version
Yes CSS1
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

list-style: { list-style-type list-style-position list-style-image | inherit } ;

Description

This shorthand property sets all three list style properties simultaneously. Note that an omitted property value will be set to that property’s initial value.

Example

This style rule uses inheritance to set the list marker for items within the element with ID "legal" to be uppercase Latin letters that appear inside the list items’ principal block boxes:

#legal {
 list-style: upper-latin inside;
}

Value

Refer to the individual properties for information on allowed and initial values.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full

Internet Explorer for Windows versions up to and including 7 have a shorthand bug where it won’t hide the list-image using list-style:none but requires list-style-image:none instead (note that the image must exist for this bug to be tested).

Internet Explorer for Windows versions up to and including 7 and under will not show the list marker if the list element is floated (there is no fix for this).

Internet Explorer for Windows versions up to and including 7 will not increment the list markers in numbering systems if the list item has haslayout. The list markers may also be misplaced along with various other bugs (for a good summary of these bugs visit Bruno Fassino’s site).

In Internet Explorer for Windows version 8 disclist markers aren’t rendered correctly when using "MS Sans Serif" as the markers are rendered as vertical bars ( Microsoft Connect Bug report ).

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Internet Explorer for Windows versions up to and including 8 will only recognize a list image URI if it’s immediately followed by whitespace following the closing bracket, or the end of the declaration.

Previous / Next page

  1. Previous
  2. Next

User-contributed notes

ID:
#2
Contributed:
by mattymcg
Date:
Wed, 19 Mar 2008 05:08:06 GMT

I'd expect to see the individual properties listed as Related Reading...

ID:
#1
Contributed:
by Paul O'B
Date:
Tue, 04 Mar 2008 14:06:40 GMT

There seems to be to be a shorthand bug in IE6 and 7 where it won't hide the list-image with list-style:none but only with list-style-image:none;

A simple test confirms this:

ul{
list-style-type: square;
list-style-image: url(bullet.gif);
padding: 1em;
margin: 0;
list-style:none;
/*list-style-image:none; IE would also need this*/
}

<ul>
<li>testing</li>
</ul>

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

Search