Skip to: content, navigation

list-style (CSS property)

Spec
Inherited Initial Version
Yes CSS1
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+
Buggy 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
5.5 6.0 7.0 1.0 1.5 2.0 1.3 2.0 3.0 9.2 9.5
Buggy Buggy Buggy Full Full Full Full Full Full Full Full

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

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

User-contributed notes

ID:
#3
Contributed:
by ulrike
Date:
Wed, 27 May 2009 09:23:37 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

The bug Paul describes is still present in IE8 :-(

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
Status:
This note has not yet been confirmed for accuracy and relevance.

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