Skip to: content, navigation

list-style-image (CSS property)

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

Syntax

list-style-image: { uri | none | inherit } ;

Description

This property specifies the image to use as a list marker for an item in a list (an element whose display property has the value list-item). If the specified image is available, it will replace any marker specified by the list-style-type property.

The exact position of the list marker image can’t be specified beyond what the list-style-position property allows.1

Example

This style rule assigns an image as the list marker for all items in the list with ID "links":

#links li {
  list-style-image:
  ➥    url("/images/link.png");
}

Value

If the property value is specified as none, no list marker image will be used. Instead, the list-style-type property will control what type of list marker—if any—will be rendered.

If the value is specified as a URI using the url() functional notation, the image at that URI will be used as the list marker if it’s available.

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

In Internet Explorer for Windows versions up to and including 7, a floated list item will not display any list marker image.

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

Footnotes

1 It has become common practice, however, to apply a background image to the list items in order to gain precise control over list item marker image positioning.

User-contributed notes

ID:
#4
Contributed:
by gomedia
Date:
Sat, 26 Jul 2008 00:02:25 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Internet Explorer for Windows, doesn't seem to display any list marker image if the <ul> is floated OR absolutely positioned.

Internet Explorer DOES display marker image if the positon is set to inside.

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