Click to Rate and Give Feedback
MSDN
MSDN Library
Web Development
HTML and CSS
CSS Reference
Attributes
Lists
 listStylePosition Property

  Switch on low bandwidth view
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[ sPosition = ] object.style.listStylePosition

Possible Values

sPositionString 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.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. 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) World Wide Web link.

Applies To

currentStyle, LI, OL, runtimeStyle, style, UL, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor
Tags What's this?: Add a tag
Community Content   What is Community Content?
Add new content RSS  Annotations
IE 5.5 misplaces bullet      danbjorn   |   Edit   |   Show History
For ordered lists, if you specify list-style-position: inside, IE 5.5 incorrectly places the digit too far to the left. If you apply a width to the <ol>, such as width: 99%, it places it correctly.

I haven't tested this with browsers before 5.5; there is no problem in 6+
Tags What's this?: css (x) Add a tag
Flag as ContentBug
Processing
© 2009 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Page view tracker