Style Sheets Properties Guide
=Classification Properties=
= Index DOT Html by Brian Wilson [bloo@blooberry.com] =

display | white-space | list-style
list-style-type | list-style-image | list-style-position
Main Index | Style Sheet Index | Element Tree | Element Index | HTML Support History


Classification properties control the fundamental nature that is intrinsic to HTML behavior. Most tags can be considered to be either Block Structuring elements OR Character Level elements. Multiple spacing and linebreaking are always collapsed unless within a PRE section. Unordered and ordered lists always have the same display. All this is always constant.

WRONG!
That has all changed. With these three properties, you can change the intrinsic HTML characteristics for most tags. This eliminates the need to use a specific tag to achieve certain display characteristics. Use some of these properties with caution, as the power these attributes give can easily be abused. The 'list-style' and associated properties will be very useful for most authors - it allows a wide range of list-markers to be used in list displays.


display [ IE4B1 | N4B2 ]
Applicable Elements: ALL
HTML Equivalent: NA
Inherit From Parent: No
Default Value: Depends on HTML behavior
What Is It?
This property controls the fundamental HTML nature of the tag. Default values for each HTML tag are taken from the HTML specifications. This property allows an element to be treated as a block element, a list item element or an inline element. An additional option 'none' turns off the display of the element including children elements and the surrounding box structure. This is a very powerful property and should be used with caution.
Example
Ext/Doc: p { display: block }
In-Line:  <p STYLE="display: block">text</p>
Browser Notes
Netscape 4 Beta 2 supports these properties, but produces some unexpected results. The value 'Block' produces a break before the element, but not after. 'List-item' creates an indent with no list markers, and 'None' turns off the element and everything else until a new block element is reached (the last was not tested extensively.)
Allowed
Values
 Value
Type
 Browser
Support
 Description
block explicit IE | N4B2 This setting equates the current element to other block-level elements such as H1, BLOCKQUOTE and P.
inline explicit IE | N4B2 This setting equates the current element to other inline elements (also called Phrase Markup or Character Formatting) such as EM, B, and FONT.
list-item explicit IE | N4B2 This setting equates the current element to other list sub-structures. This includes elements such as LI, and DD
none explicit IE4B1 | N4B2 This value turns off the display of the current element, its virtual display box as well as its children elements.


white-space [ IE | N4B2 ]
Applicable Elements: Block-Level Elements
HTML Equivalent: <pre> | <nobr>
Inherit From Parent: Yes
Default Value: Depends on HTML tag
What Is It?
This property controls how white space and carriage returns/linefeeds should be handled in a document. 'Normal' is the inherent value for most HTML elements, with the exceptions having their own tags to create special behavior. This is a very powerful property and should be used with caution.
Example
Ext/Doc: p { white-space: normal }
In-Line:  <p STYLE="white-space: normal">text</p>
Allowed
Values
 Value
Type
 Browser
Support
 Description
normal explicit IE | N4B2 This setting is the normal behavior of most HTML tags. Carriage returns, linefeeds and multiple spaces are treated as a single space. Line wrapping is controlled by the browser.
pre explicit IE | N4B2 This setting makes a section behave like the HTML PRE tag, where line wrapping control is taken away from the browser and all spaces, carriage returns, and linefeeds in the document are preserved and displayed "as-is."
nowrap explicit IE | N Sections with a property value of 'nowrap' treat carriage returns/linefeeds and multiple spaces as a single space, but linebreaks are not controlled by the browser. They are instead controlled only by the HTML BR element.


list-style [ IE4B2 | N4B5 ]
Applicable Elements: All elements with a default or assigned display property value of 'list-item'.
HTML Equivalent: <ul TYPE> | <ol TYPE> | <li TYPE>
Inherit From Parent: Yes
Default Values: [marker-type]: disc, [position]: outside
What Is It?
This compound property is used when the author wishes to change the default display characteristics of list-markers in HTML list structures. An author can specify location of the marker, a graphic to be used and/or a standard set of symbols. Keywords may come in any order, but using multiple keywords that control the same behavior is not allowed. If a [URL] is specified for the list marker, it will be used in place of any [marker-type] also specified. Nevertheless, a [marker-type] should always be specified in the event the [URL] can not be loaded.
Usage:
Selector { list-style: [marker-type] [position] [URL] }
Example
Ext/Doc: ul { list-style: url(http://www.foo.com/bullet.gif) square inside }
In-Line: <ul><li STYLE="list-style: url(http://www.foo.com/bullet.gif) square inside">test text in the list item</li></ul>
Allowed
Values
 Value
Type
 Browser
Support
 Description
[list-style-type] [marker-type] IE4B2 | N4B5 See the individual property for details on syntax and allowed values.
[list-style-position] [position] IE4B2 | N See the individual property for details on syntax and allowed values.
[list-style-image] [URL] IE4B2 | N See the individual property for details on syntax and allowed values.


list-style-type [ IE4B2 | N4B5 ]
Applicable Elements: All elements with a default or assigned display property value of 'list-item'.
HTML Equivalent: <ul TYPE> | <ol TYPE> | <li TYPE>
Inherit From Parent: Yes
Default Values: disc
What Is It?
This property is used when the author wishes to change the default appearance of list-markers in HTML list structures. If a 'list-style-image' property is also given and it has a value of 'none' or the URL can not be loaded, the 'list-style-type' property value will be used in its place. This property should always be specified in the event the URL pointed to in 'list-style-image' can not be loaded.
Example
Ext/Doc: ul { list-style-type: square }
In-Line: <ul><li STYLE="list-style-type: square">test text in the list item</li></ul>
Allowed
Values
 Value
Type
 Browser
Support
 Description
none explicit IE4B2 | N4B5 No list-marker will be displayed for each list item.
disc | circle | square explicit IE4B2 | N4B5 This specifies standard symbols to use as non-ordered list markers. For each successive list-item, the symbol will remain the same.
    - 'disc': Solid bullet (default.)
    - 'circle': Hollow bullet.
    - 'square': Solid square.
decimal | lower-roman | upper-roman | lower-alpha | upper-alpha explicit IE4B2 | N4B5 This specifies a standard set of symbol systems to use as ordered list markers. The values increment with each successive list item using an alpha-numeric sequence.
    - 'decimal': 1, 2, 3,4, 5,...
    - 'lower-roman': i, ii, iii, iv, v,...
    - 'upper-roman': I, II, III, IV, V,...
    - 'lower-alpha': a, b, c, d, e,...
    - 'upper-alpha': A, B, C, D, E,...


list-style-image [ IE4B2 | N ]
Applicable Elements: All elements with a default or assigned display property value of 'list-item'.
HTML Equivalent: NA
Inherit From Parent: Yes
Default Values: none
What Is It?
This property indicates a graphic to be used for the list markers in the list structure. This overrides the default appearance of list-markers in the current HTML list structure. If a 'list-style-image' is given a value of 'none' or the URL can not be loaded, the 'list-style-type' will be used in its place. The 'list-style-type' should always be specified in the event the URL pointed to in 'list-style-image' can not be loaded.
Example
Ext/Doc: ul { list-style-image: url(http://www.foo.com/bullet.gif) }
In-Line: <ul><li STYLE="list-style-image: url(http://www.foo.com/bullet.gif)">test text in the list item</li></ul>
Allowed
Values
 Value
Type
 Browser
Support
 Description
none explicit IE4B2 | N No list-marker will be displayed for each list item.
[URL] explicit IE4B2 | N This value indicates the URL source for the list-marker graphic. It can be either an absolute or relative URL. Please see the section on URL Units for details on how to indicate a URL within a Style Sheet. If the graphic can not be loaded, whatever 'list-style-type' property is set will be used.


list-style-position [ IE4B2 | N ]
Applicable Elements: All elements with a default or assigned display property value of 'list-item'.
HTML Equivalent: NA
Inherit From Parent: Yes
Default Values: outside
What Is It?
This property determines how the list-marker is rendered in relation to the content of the list item.
Example
Ext/Doc: ul { list-style-position: inside }
In-Line: <ul><li STYLE="list-style-position: inside">test text in the list item</li></ul>
Allowed
Values
 Value
Type
 Browser
Support
 Description
inside explicit IE4B2 | N This renders wrapped text at a similar indentation level to the list-marker.
outside explicit IE4B2 | N This specifies that all list item content will be rendered indented from the list-marker.


Boring Copyright Stuff....