list-style-position

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Errors Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value outside
Inherited Yes
Applied To tags <DD>, <DT>, <LI>, <OL>and <UL> and also to all elements having specified the style property "display: list-item"
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position

Description
It defines how the marker will be placed relative to the text. There are 2 values: "outside" - marker is placed outside the text (fig.1); and "inside" - marker is flowed by the text (fig.2).




Syntax

list-style-position: inside | outside

Arguments
inside
Marker is a part of the text block and is imaged in the list element.
outside
Text is left aligned and markers are placed outside the text block.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>list-style-position</title>
  <style type="text/css">
   UL {
    list-style-image: url(images/book.gif); /* Path to the image for marker setting */
    list-style-position: inside; /* Marker is flowed by the text */
   }
  </style>
 </head> 
 <body> 
 
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
   enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
   nisl ut aliquip ex ea commodo consequat.</li>
  </ul>
 
 </body>
</html>

The result of this example is shown on the figure 3


Object model

[window.]document.getElementById("elementID").style.listStylePosition

Remark
In the browser Internet Explorer 6 when you use the enumerated list <OL> and the value "inside" of the parameter "list-style-position", the numbers more than 10 begin to collide the list text.