3 out of 8 rated this helpful - Rate this topic

list-style-image property

Sets or retrieves a value that indicates which image to use as a list-item marker for the object.

Syntax

list-style-image: url(sURL) | none

Property values

none: Default. No image is specified.
url(sURL): Location of the image, where sURL is an absolute or relative URL.

CSS information

Applies To	All elements
Media	visual
Inherited	1
Initial Value

Standards information

CSS 2.1, Section 5.6.4

Remarks

The list-style-image property can be applied to any element when margin and display:list-item are applied. The display: list-item property is available starting with Microsoft Internet Explorer 6.

When the image is available, it replaces the marker that is set with the list-style-type marker.

If the left margin of the list item is set to 0 using one of the margin properties, the list-item markers do not show. The margin should be set to a minimum of 30 points.

Examples

The following examples use the list-style-image attribute and the list-style-image property to set the image for markers.

This example uses ul as a selector in an embedded (global) style sheet to set the marker to the dot.gif image.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/list-style-image.htm


<STYLE>
    UL { list-style-image:url(dot.gif) }
</STYLE>

This example uses inline scripting to change the style of the list-item marker to an image when an onmouseover event occurs.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/listStyleImage.htm


<UL onmouseover="this.style.listStyleImage='url(dot.gif)'">

Community Additions

ADD