list-style-position Attribute | listStylePosition Property

MS Office DHTML, HTML & CSS

list-style-position Attribute | listStylePosition Property


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

Syntax

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

Possible Values

sPosition String that specifies one of the following values:
outsideMarker is placed outside the text, and any wrapping text is not aligned under the marker.
insideMarker is placed inside the text, and any wrapping text is aligned under the marker.

The property is read/write with 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 dynamic propertiesInternet Link.

Remarks

This property applies only to objects with a display value of list-item.

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.

Example

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.

Sample Code

<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 Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

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 Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
PlatformVersion
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
currentStyle, LI, OL, runtimeStyle, style, UL

Back to topBack to top

Did you find this topic useful? Suggestions for other topics? write us!Internet Link

© 1999 microsoft corporation. all rights reserved. terms of useInternet Link.