list-style-position Attribute | listStylePosition Property

Sets or retrieves a variable that indicates how the list-item marker is drawn relative to the content of the object.

Syntax

HTML { list-style-position : sPosition }
Scripting object.style.listStylePosition [ = sPosition ]

Possible Values

sPosition String that specifies or receives one of the following values.
outside Default. Marker is placed outside the text, and any wrapping text is not aligned under the marker.
inside Marker is placed inside the text, and any wrapping text is aligned under the marker.
The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of outside. The Cascading Style Sheets (CSS) attribute is inherited.
Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.

Remarks

The listStylePosition property can be applied to any element when margin and display:list-item are applied. The display:list-item property is available as of Microsoft® Internet Explorer 6 and later.
If the left margin of a 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-position attribute and the listStylePosition property to set the position for markers.
This example uses ul and UL.compact as selectors in an embedded (global) style sheet to set the position of the list-item markers.
<STYLE>
UL	{ list-style-position:inside }
UL.compact { list-style-position:outside }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>...
<LI>...
</UL>
<UL CLASS=compact>
<LI>...
<LI>...
</UL>
This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
This example uses inline scripting to change the marker position when an onmouseover event occurs.
<SPAN STYLE="width:3cm" onmouseover="this.style.listStylePosition='inside'"
onmouseout="this.style.listStylePosition='outside'">
This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) .

Applies To

currentStyle, LI, OL, runtimeStyle, style, UL