Getting StartED with CSS

• The Book
• CSS Basics
  • How Do I Write a Style Rule?
  • Where Do I Create My CSS?
  • How Do I Specify Values?
  • What’s the Cascade?
• CSS Properties
  • Background
  • Borders
  • CSS Box Model
  • Display/Visibility
  • Floating
  • Generated Content
  • Lists
  • Positioning
  • Printing
  • Tables
  • Text
  • User Interface
• CSS Selectors
  • Basic Selectors
  • Pseudo-classes & Pseudo-elements
  • Combining Selectors
  • Attribute Selectors

Display and Visibility Properties

These properties change the way elements are displayed. See Chapter 8 for the main description of how they work. The table-related display properties are discussed in Chapter 11 (see also Chapter 9 for detailed coverage of CSS and tables).

display

Accepted values:

inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none

Default:

inline

Inherited:

No

Changes the default display of an element, e.g., turns an inline element into a block-level one and vice versa.

The only values fully supported by all browsers in current widespread use are block, inline, and none. IE6 and IE7 offer support for inline-block when applied to elements that are normally displayed inline.

Examples:

• inline
• inline-block

IE8 and Opera are the only mainstream browsers that support run-in correctly.

The table-related values are not supported by IE6 and IE7. All other browsers in widespread use support them, but with some minor inconsistencies in Safari 3.

overflow

Accepted values:

visible, hidden, scroll, auto

Default:

visible

Inherited:

No

Controls the display of content that is too big to fit into a fixed-size container in the following ways:

• visible: Content is permitted to spill out of its container, but the container’s background and borders are not resized. Example
• hidden: Excess content is hidden and cannot be accessed by the user. Example
• scroll: Vertical and horizontal scrollbars are added to the container, even if there is no overspill. Example
• auto: Scrollbars are added to the container only if the content is too big to fit. Example

Setting overflow to hidden or auto can also be used to extend the background of an element to clear any floated elements nested inside, as described in Chapter 6. Example

visibility

Accepted values:

visible, hidden, collapse

Default:

visible

Inherited:

Yes

Controls the visibility of an element, but does not remove it from the flow of the document. Used mainly in conjunction with JavaScript dynamic effects.

If visibility is set to hidden, the browser leaves a space where the element would normally have been. Example

To remove an element entirely from the page layout, use display and set its value to none. Example

The collapse value is used only with table columns. When the visibility of a table column is set to collapse, the browser should hide it, and reduce the width of the table by the same width. Currently, IE8 is the only browser that supports this correctly. Example

© 2009–10 David Powers