Layouts, Margins, and Other Style Sheet Property References - List-style-image
(Page 4 of 5 )
list-style-image
IE 4 NN n/a Moz all Saf all Op all CSS 1
Inherited: Yes
Provides the URL for an image that is to be used as the marker for a list item. Because this property can be inherited, a setting for an individual list item can override the same property setting in its parent.
CSS Syntax
list-style-image: none | uri
Value
For uri, supply any valid full or relative URL (in the CSS format) to an image file with a MIME type that is readable by the browser.
Initial Value none
Example
ul {list-style-image: url(images/folder.gif)}
li.file {list-style-image: url(images/doc.gif)}
Applies To
dd, dt, li, ol, and ul elements and any other element assigned the display: list-item style property.
Object Model Reference
[window.]document.getElementById("elementID").style.listStyleImage
list-style-position
IE 4 NN n/a Moz all Saf all Op all CSS 1
Inherited: Yes
Determines whether the marker is inside or outside (outdented) from the box containing the list item’s content. When the list-style-position is set to inside and the content is text, the marker appears to be part of the text block. In this case, the alignment (indent) of the list item is the same as normal, but without the outdented marker. Figure 4-5 demonstrates the effects of both settings on wrapped list item text.
CSS Syntax
list-style-position: inside | outside
Value Any of the constant values: inside | outside.
Initial Value outside
Example ul {list-style-position: inside}
Applies To
dd , dt , li , ol , and ul elements and any other element assigned the display: list-item style property.
Figure 4-5. Results of list-style-position settings
Object Model Reference
[window.]document.getElementById("elementID").style.listStylePosition
list-style-type
IE 4 NN 4 Moz all Saf all Op all CSS 1
Inherited: Yes
Sets the kind of item marker to be displayed with each item. This property applies only if list-style-image is none (or not specified). The constant values available for this property are divided into two categories. One set is used with ul elements to present a filled disc, an empty circle, or a filled square; the other set is for ol elements, which have list items that can be marked in sequences of Arabic numerals, Roman numerals (uppercase or lowercase), or letters of the alphabet (uppercase or lowercase), and some other character
sequences of other languages if the browser and operating system supports those languages.
CSS Syntax
list-style-type: listStyleType
Value
One constant value that is relevant to the type of list container. For ul: circle | disc | square. For ol : decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha . Commonly supported ol element sequences are treated as shown in the following table.
Type | Example |
decimal | 1, 2, 3, ... |
decimal-leading-zero | 01, 02, 03, ... |
lower-alpha | a, b, c, ... |
lower-greek | α,β,γ, ... |
lower-roman | i, ii, iii, ... |
Type | Example |
upper-alpha | A, B, C, ... |
upper-roman | I, II, III, ... |
Initial Value disc (for first level ul ); decimal (for ol ).
Example
ul {list-style-type: circle}
li {list-style-type: upper-roman}
Applies To
dd, dt, li, ol, and ul elements and any other element assigned the display: list-item style property.
Object Model Reference
[window.]document.getElementById("elementID").style.listStyleType
Next: Margin >>
More DHTML Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Check it out today at your favorite bookstore. Buy this book now.
|
|
