Thursday 08th of October 2015 10:06:45 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 That's because the position of the inline boxes in the line forces it to be taller than 12 pixels, but the line-box still isn't tall enough for the text to avoid overlapping other lines.

The situation can become markedly different if we change the vertical alignment of the inline boxes. Suppose that we change the boldface text to have a vertical alignment of middle. This would have the result shown in Figure 8-53.

Index: M

margin-bottom property: 7.3.4. Single-Side Margin Properties
margin-left property: 7.3.4. Single-Side Margin Properties
margin property: 7.3. Margins
margin-right property: 7.3.4. Single-Side Margin Properties
margin-top property: 7.3.4. Single-Side Margin Properties
margins: 7. Boxes and Borders
7.3. Margins
collapsing: 7.3.5. Collapsing Margins
block-level elements: Collapsing vertical margins
floated elements: 7.6.1. Floated Elements
horizontal, noncollapsing: 8.2.2. Horizontal Formatting
inline elements and: 7.3.7. Margins and Inline Elements
caution with: 7.3.8. Margins: Known Issues
length values and: 7.3.1. Length Values and Margins
negative (see negative margins)
vs. padding: 7.2. Margins or Padding?
percentages and: 7.3.2. Percentages and Margins
replication: 7.3.3. Replicating Values
single side, setting margin for: 7.3.4. Single-Side Margin Properties
table cells and: 1.3.1. Limited Initial Scope
markers: 8.2.3. List Items
8.2.3. List Items
10.4.2. Markers
matching hyphenated values: Matching hyphenated values
matching single attribute values: Matching single attribute values
max-height property: Limiting width and height
max-width property: Limiting width and height
media types: 1.3.1. Limited Initial Scope
10.8. Media Types and @-rules
Microsoft Internet Explorer (see Internet Explorer)
middle alignment: In the middle
millimeters (mm): 3.2.1. Absolute Length Units
min-height property: Limiting width and height
min-max properties: Limiting width and height
min-width property: Limiting width and height
monospace fonts: 5.1. Font Families
multiple pages, using styles on: 1.2.3. Using Your Styles on Multiple Pages

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.

your document's body, try this:

BODY, TABLE, TD, TH {color: red;}

This will often solve the problem. I say "often" becauseit doesn't always work, for reasons that are poorly understood.Navigator 4 has the most trouble getting it right, but its failuresare not consistent. The best minds in CSS analysis have yet to comeup with a recipe for predicting Navigator's behavior,unfortunately.

it on the right. In other words, a two-column layout! This firstcolumn is declared to be 40% as wide as the browser window, have aleft margin 10% as wide as the browser window, and a right marginthat is 5% of the window's width. This will cause the secondcolumn to automatically calculate its overall width as 45% (40 + 10 +5 = 55, and 100 - 55 is 45).

Thus, the two columns will be of not-quite-equal width, as we can seein Figure 11-7, but that's the effect we want.

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