532

Appendix CCSS Properties

overflow
This specifies how a container element will display content that is too large for its containing
element.
p {width:200px; height:200px; overflow:scroll;}
Value

IE

Inherited

No

auto

Default

visible

hidden

Applies to

Block elements

visible

scroll

inherit

overflow-x
This is the same as overflow but only for the horizontal x axis. This was first supported in IE5.

overflow-y
This is the same as overflow but only for the vertical y axis. This was first supported in IE5.

position
This specifies the positioning schema that should be used for an element. When an element is
positioned, you also need to use the box-offset properties covered next (top, left, bottom, and
right). Note that you should not use top and bottom or left and right together (if you do,
top and left take priority).

absolute can be fixed on the canvas in a specific position from its containing element (which
is another absolutely positioned element); it will also move when the user scrolls the page.

static will fix it on the page in the same place and keep it there even when the user scrolls.

relative will be placed offset in relation to its normal position.

fixed will fix it on the background of the page and not move when the user scrolls.

p.article{position:absolute; top:10px; left:20px;

Value

IE

Inherited

No

absolute

Default

static

relative

Applies to

All elements

Positioning Properties

static

fixed

inherit

533

right
This sets the horizontal position of an element from the right of the window or containing element.
Value

IE

Inherited

No

auto

Default

auto

[length]

Applies to

Positioned elements

[percentagerelative to
parents width]

inherit

top
This sets the vertical position of an element from the top of the window or containing element.
Value

IE

Inherited

No

auto

Default

auto

[length]

Applies to

Positioned elements

[percentagerelative to
parents height]

inherit

vertical-align
This sets the vertical positioning of an inline element:

baseline aligns element with base of parent.

middle aligns midpoint of element with half the height of parent.

sub makes element subscript.

super makes element superscript.

text-top aligns element with the top of parent elements font.

534

Appendix CCSS Properties

text-bottom aligns element with the bottom of parent elements font.

top aligns top of element with the top of tallest element on current line.

bottom aligns element with the bottom of lowest element on the current line.

span.superscript {vertical-align:super;}

Value

IE

Inherited

No

baseline

Default

baseline

middle

Applies to

Inline elements

sub

super

text-top

text-bottom

top

bottom

[percentagerelative to line height]

[length]

inherit

z-index
This controls which overlapping element appears to be on top. Positive and negative numbers
are permitted.
p {position:absolute; top:10px; left:20px; z-index:3;}
Value

IE

Inherited

No

auto

Default

Depends on position of element in

XHTML source document

[number]

inherit

Applies to

Positioned elements

Outline Properties
Outlines act like borders, but do not take up any spacethey sit on top of the canvas.

Table Properties

535

outline (outline-color, outline-style, outline-width)

This is a shortcut for the outline-color, outline-style, and outline-width properties:
outline {solid #ff0000 2px}

Note that outline-color, outline-style, and outline-width take the same values as
border-color, border-style, and border-width.
Value

IE

Inherited

No

outline-color

Default

none

outline-style

Applies to

All elements

outline-width

outline

Table Properties
Table properties enable you to affect the style of tables, rows, and cells.

border-collapse
This specifies the border model that the table should use (whether adjacent borders should be collapsed into one value or kept separate).
table {border-collapse:separate;}
Value

IE

Inherited

Yes

collapse

Default

collapse

separate

Applies to

Table and inline elements

inherit

border-spacing
This specifies the distance between adjacent cells borders.
table {border-spacing:2px;}
Value

IE

Inherited

Yes

[length]

Default

inherit

Applies to

Table and inline elements

536

Appendix CCSS Properties

caption-side
This indicates which side of a table a caption should be placed on.
caption {caption-side:bottom;}
Value

IE

Inherited

Yes

top

Default

top

left

Applies to

<caption> elements in
<table> elements

bottom

right

inherit

empty-cells
This specifies whether borders should be displayed if a cell is empty.
td, th {empty-cells:hide;}
Value

IE

Inherited

Yes

show

Default

show

hide

Applies to

Table cell elements

inherit

table-layout
This specifies how the browser should calculate the layout of a table; it can affect the speed of rendering a large or graphics-intensive table.
Value

IE

Inherited

No

auto

Default

auto

fixed

Applies to

Table and inline elements

inherit