Expandable Outlines: the "display" property
  
|
Expandable Outlines
the CSS1 display property
The Cascading Style Sheets, Level 1 Specification introduced the display property for all elements, to control how and if an element is rendered. The four possible values are: block, inline, list-item, and none.
Simply:block: a new line is called for before the element. The P, UL, BLOCKQUOTE, and PRE tags are examples of block elements.
inline: the element is placed on the same line as the preceding content. Anchors, images, and text formatting tags such as B, I, SMALL, and BIG are inline elements.
list-item: all the characteristics of block, with the addition of formatting that identifies it as an item in a list. Usually, a left indent is added. LI is, of course, the typical example.
none: the element is not rendered, resulting in it not being displayed. It is, in essence, skipped over. The page formats as if the element does not exist. Not to be confused with the CSS-positioning visibility property, which, even with a value of hidden, still causes the element to be rendered and to occupy its space in the page.
Why a display property?
All HTML elements have browser-provided style characteristics. CSS was introduced to allow web authors to modify or enhance the default styles, and to create their own style declarations for unique elements.
It is assumed, therefore, that display allows us to change P from a block to an inline element, or B from inline to block. Under certain circumstances this might be desirable.
For example, a stylesheet of:
- I {font-weight:bold; font-style:normal}
B {font-weight:normal; font-style:italic}
would cause all I-contained text to render bold and B-contained text to render italic. Both DHTML browsers allow this.
What happens when we try:
- P {display:inline}
I {display:block}
CSS logic suggests that all P-contained material (paragraphs, usually) would run into each other, while I-contained material would be rendered on a new line.
But who said that logic was a part of this industry?
Browser Confusion
When it comes to the display property, Explorer and Navigator agree on very little. The example below is a rendering of the following HTML. The text is taken from the CSS1 spec.
- <P STYLE="display:block"><B>P - block:</B> An element with a
'display' value of 'block' opens a new box...</P> <P STYLE="display:inline"><B>P - inline:</B> An element with a
'display' value of 'inline' results in a new inline box...</P> <P STYLE="display:inline"><B>P - inline:</B> An element with a
'display' value of 'inline' results in a new inline box...</P> <P STYLE="display:list-item"><B>P - list-item:</B> A value of 'list-item'
is similar to 'block' except that a list-item marker is added...</P> <P STYLE="display:none"><B>P - none:</B> A value of 'none'
turns off the display of the element,
including children elements and the surrounding box.</P> <I STYLE="display:block"><B>I - block:</B> An element with a
'display' value of 'block' opens a new box...</I> <I STYLE="display:block"><B>I - block:</B> An element with a
'display' value of 'block' opens a new box...</I> <I STYLE="display:inline"><B>I - inline:</B> An element with a
'display' value of 'inline' results in a new inline box...</I> <I STYLE="display:inline"><B>I - inline:</B> An element with a
'display' value of 'inline' results in a new inline box...</I> <I STYLE="display:list-item"><B>I - list-item:</B> A value of 'list-item'
is similar to 'block' except that a list-item marker is added...</I> <I STYLE="display:none"><B>I - none:</B> A value of 'none'
turns off the display of the element,
including children elements and the surrounding box.</I>
** Rendering of above:
P - block: An element with a 'display' value of 'block' opens a new box. The box is positioned relative to adjacent boxes according to the CSS formatting model. Typically, elements like 'H1' and 'P' are of type 'block'.
P - inline: An element with a 'display' value of 'inline' results in a new inline box on the same line as the previous content. The box is dimensioned according to the formatted size of the content. If the content is text, it may span several lines, and there will be a box on each line. The margin, border and padding properties apply to 'inline' elements, but will not have any effect at the line breaks.
P - inline: An element with a 'display' value of 'inline' results in a new inline box on the same line as the previous content. The box is dimensioned according to the formatted size of the content. If the content is text, it may span several lines, and there will be a box on each line. The margin, border and padding properties apply to 'inline' elements, but will not have any effect at the line breaks.
P - list-item: A value of 'list-item' is similar to 'block' except that a list-item marker is added. In HTML, 'LI' will typically have this value.
I - block: An element with a 'display' value of 'block' opens a new box. The box is positioned relative to adjacent boxes according to the CSS formatting model. Typically, elements like 'H1' and 'P' are of type 'block'. I - block: An element with a 'display' value of 'block' opens a new box. The box is positioned relative to adjacent boxes according to the CSS formatting model. Typically, elements like 'H1' and 'P' are of type 'block'. I - inline: An element with a 'display' value of 'inline' results in a new inline box on the same line as the previous content. The box is dimensioned according to the formatted size of the content. If the content is text, it may span several lines, and there will be a box on each line. The margin, border and padding properties apply to 'inline' elements, but will not have any effect at the line breaks. I - inline: An element with a 'display' value of 'inline' results in a new inline box on the same line as the previous content. The box is dimensioned according to the formatted size of the content. If the content is text, it may span several lines, and there will be a box on each line. The margin, border and padding properties apply to 'inline' elements, but will not have any effect at the line breaks. I - list-item: A value of 'list-item' is similar to 'block' except that a list-item marker is added. In HTML, 'LI' will typically have this value. I - none: A value of 'none' turns off the display of the element, including children elements and the surrounding box.** End example rendering
For those unable to try this page on both DHTML browsers, we provide a summary of the results:
Explorer: The only value of display that made a difference to the default rendering was none. All P elements started on a new line, with no indent when a list-item was called for. All I elements remained inline, with no list item identifier. The elements with a display of none were not rendered, as expected.
Navigator: P insists on remaining a block element. inline has no effect, but list-item does. An indent and vertical space are added. I, on the other hand, gave us four different and correct renderings. With block, it moved to a new line, without additional vertical space. inline forced the default rendering, list-item gave us vertical block spacing with a left indent, and none, no rendering.
Conclusion of sorts: In Explorer, the display property will not change the visible rendering of an element. It can be used only as a toggle, with the none value, to turn rendering on or off. Navigator has much better support of this CSS property. All values are supported and properly rendered, with one exception: block elements cannot become inline elements.
With that said...
...it's time for the bad news:
Navigator cannot modify this property after page load. Explorer can. Using this capability, creating expandable/collapsable outlines in Explorer is a breeze: we just toggle the display value. With Navigator, it's a bit more difficult.
Let's start with the simple, Explorer method.
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.Created: Jan. 14, 1998
Revised: Jan. 18, 1998
URL: https://www.webreference.com/dhtml/column12/outDisplay.html
Find a programming school near you