Sunday 25th of February 2018 10:08:17 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: N

named colors: 3.1.1. Named Colors
navigation bar: 11.1.2. Case 2: Library Catalog System Interface
negative margins: 7.3.6. Negative Margin Values
block-level elements: Negative margins
caution with: 7.3.6. Negative Margin Values
browser support for: 7.3.6. Negative Margin Values
floated elements and: Negative margins and floating Negative margins
11.1.3. Case 3: Putting a Magazine Article Online
inline replaced elements and: Adding box properties
negative values in percentage colors: Percentage colors
nesting, shrinking text and: 11.2.6. The Incredible Shrinking Text!
Netscape Navigator
blinking support: 4.1.6. Text Decoration
CSS implementations in: 1.3.2. Implementations
disappearing styles: 11.2.10. Disappearing Styles
margin problems and: 11.2.3. Fighting Margin Problems with @import
preferences for style sheets/JavaScript: 11.2.1. Making Styles Work
Netscape Navigator 4.x
background color: 7.4.6. Borders: Known Issues
background color, incorrect placement: Real-world issues
correcting: 11.2.5. Getting Full Content Backgrounds in Navigator
block-level elements, borders and: 7.4.6. Borders: Known Issues
bold text, preserving: 11.2.7. Preserving Boldness
inline elements
borders and: 7.4.5. Borders and Inline Elements
caution with: 7.4.6. Borders: Known Issues
margins and: 7.3.8. Margins: Known Issues
padding and: 7.5.4. Padding: Known Issues
relative URLs and: 3.4. URLs
styles, hiding: 11.2.2. Hiding Styles with @import
nonreplaced elements: 8.4. Inline Elements
number keywords: 5.2.1. How Weights Work
numbering, automatic: 10.4.1. Automatic Numbering
numeric RGB equivalents, list of: Going by numbers

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 <P>The next paragraph.</P>

Figure 8-23

Figure 8-23. The effects of a negative bottom margin

What's really happening in Figure 8-23 is thatthe elements following the DIV are placedaccording to the location of the bottom of theDIV. As we can see, the end of theDIV is actually above the visual bottom of itschild paragraph. The next element after the DIV is | Y | Z

Library Navigation Links

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

paragraph and one that has a ten-pixel margin applied to it, shown inFigure 7-7:

P {background-color: silver;} {margin: 10px;}
Figure 7-7

Figure 7-7. Comparative paragraphs

(Again, the background color helps show the content area, and thedashed lines are for illustrative purposes only.) As Figure 7-7 demonstrates, 10 pixels of space are added toeach side of the content area. This is somewhat similar to using theHSPACE and VSPACE attributes in to apply to entire documents:

HTML:lang(de) {color: black; background: yellow;}

Thus would all HTML documents marked as German be shown as black texton a yellow background. This marking could be made with thelang attribute, in a META tagin the document's head, or even as a value in thedocument's HTTP headers. This is somewhat similar to the|= attribute selector discussed in the previoussection, but it is a little more general.

<IMG SRC="foo.gif" STYLE="clip: rect(10px, auto, auto, 0);">

The auto values will set the clippingrectangle's bottom to align with the bottom of the image, andthe right edge to the right edge of the image. The value of0 for left keeps the left edgeof the clipping rectangle against the left edge of the image, but the10px for top moves the top edgeof the clipping rectangle downward 10 pixels. This will cause the top10 pixels of the image to become effectively invisible.