Sunday 25th of February 2018 10:13:09 PM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: V

values: 2.1.1. Rule Structure
matching: Value matching
new with CSS2: 10.9. Summary
replication: Multiple styles
tag: LINK attributes
unrecognized: 2.1.3. Declarations
variants, font (see fonts, variants)
vertical-align property: 4.1.3. Vertical Alignment
tables and: 10.7. Tables
vertical alignment: 4.1.3. Vertical Alignment
percentage values and: Percentages
vertical formatting: 8.2.1. Vertical Formatting
VGA colors: 3.1.1. Named Colors
visibility: 9.1.5. Element Visibility
visibility property: 9.1.5. Element Visibility
tables and: 10.7. Tables
visited anchors: 2.4.1. Pseudo-Class Selectors
:visited pseudo-class: 2.4.1. Pseudo-Class Selectors
visual formatting: 8. Visual Formatting
block-level elements: 8.2. Block-Level Elements
element boxes: 8.1. Basic Boxes
floated elements: 8.3. Floated Elements
visual rendering model: 1.3.1. Limited Initial Scope
VLINK attribute: 2.4.1. Pseudo-Class Selectors
voice-family property: 10.8.2. The Spoken Word
voice-related properties: 10.8.2. The Spoken Word
volume property: 10.8.2. The Spoken Word
containing block is set to the nearest ancestor (of any kind) thathas a position other thanstatic. This happens as follows:

  1. If the ancestor is block-level, the containing block is set to bethat element's padding edge; in other words, the area thatwould be bounded by a border.

  2. VSPACE attribute: 8.1. Basic Boxes

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.


We can see in Figure 7-18 that the paragraph hasbeen pulled up so far that it's practically overlapping the endof the previous paragraph. This is the expected effect.

Figure 7-18

Figure 7-18. Negative top margin

In a like manner, setting a negative value on the other sides willpull them beyond their normal limits:

<P STYLE="margin: -2em; font-weight: bold;">...
earlier in the chapter? Here's one example of how it works and how it can be very useful.

Another important point is that when an element is positioned, it establishes a containing block for its descendant elements. For example, we could absolutely position an element and then absolutely position one of its children, as shown in Figure 9-23.

Figure 9-23

Figure 9-23. Nested absolutely positioned elements

The small box B in the lower-left corner of the element A is a child

Opera 3.5 allows negative paddingvalues, but this was fixed in Opera 3.6.The other browsers don't allownegative padding lengths.

7.5.1. Percentage Values and Padding

As stated earlier, it's possible toset percentage values for the padding of an element. Percentages are

<DIV STYLE="float: right; width: 45%;">

This is the DIV for the second column. Why have wefloated it as well? Assume for a momentthat the second column is longer than the first. Without thefloat for the second column, we'd see asituation like that depicted in Figure 11-8.

Figure 11-8

Figure 11-8. Why we float twice

This is entirely consistent with the rules for floating, but it


The description of offsetting the outer edges is based on an erratum.The original CSS2 specification actuallysays that the content edges are offset, but it has been widely agreedthat this is a serious error, and in fact, readings of other parts ofthe specification show that it is the outer edges that are offset.

The implication of offsetting the outer edges of a positioned element