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:
#6
Contributed:
by Paul O'B
Date:
Sat, 02 Apr 2011 14:39:31 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Setting a ul to display:inline will cause the element to be list-style:inside in IE6 and 7 and extra space appears at the side even when margins and padding have been zeroed and list-style:none is in effect.

http://www.sitepoint.com/forums/css-53/float-left-list-gets-indented-ie6-7-a-747403.html#post4848736

ID:
#5
Contributed:
by craiga
Date:
Tue, 28 Sep 2010 01:10:33 GMT

The last paragraph of text isn't inside a p element, so the styling is off (in Safari).

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>

Related Products