Wednesday 23rd of August 2017 07:25:41 PM

by Eric A. Meyer
ISBN 1-56592-622-6
First edition, published May 2000.
(See the catalog page for this book.)

Search the text of Cascading Style Sheets: The Definitive Guide.

Table of Contents

Copyright Page
Chapter 1: HTML and CSS
Chapter 2: Selectors and Structure
Chapter 3: Units and Values
Chapter 4: Text Properties
Chapter 5: Fonts
Chapter 6: Colors and Backgrounds
Chapter 7: Boxes and Borders
Chapter 8: Visual Formatting
Chapter 9: Positioning
Chapter 10: CSS2: A Look Ahead
Chapter 11: CSS in Action
Appendix A: CSS Resources
Appendix B: HTML 2.0 Style Sheet
Appendix C: CSS1 Properties
Appendix D: CSS Support Chart
Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

containing block, and its edges are placed using the side-offsetproperties. The positioned element does not flow around the contentof other elements, nor does their content flow around the positionedelement. This implies that an absolutely positioned element mayoverlap other elements, or be overlapped by them. (We'll seehow you can affect the overlapping order at the end of the chapter.)

Remember that the containing block of an absolutely positionedelement is not necessarily its parent element. In fact, it often isnot, unless the author takes steps to correct this situation.font, but H1s have some special rules. In order to cover all the bases in a compact manner, we declare:

H1, H2, H3, H4, H5, H6 {font-family: Verdana,sans-serif;}
H1 {color: rgb(0%,40%,0%); border-bottom: thin solid; width: 100%;}

With the second declaration, not only do we use the standard color, but we enhance the idea of "underlining" by setting a bottom border that will extend from the left edge of the text all the way out to the right edge of the browser window. This line will also inherit the green color of the text and so really punch up the fact background image that is all the way to the right side of an elementand 10 pixels down from the top, as illustrated in Figure 6-44. As always, the horizontal value comes first:

BODY {background-image: url(bg23.gif);background-repeat: no-repeat;background-position: 100% 10px;}
Figure 6-44

Figure 6-44. Mixing percentages and length values

You cannot, however, mix keywords with othervalues. Thus, top 75% is notvalid. If you use a keyword, you're stuck using only keywords,Figure 7-86 shows one possibility.

Figure 7-86

Figure 7-86. Placing the bullets inside and outside list items

CSS2, by the way, provides a good deal more control over the positioning of the bullets (called "markers" in CSS2); again, this is discussed in Chapter 10, "CSS2: A Look Ahead".

7.7.4. List Styles In Shorthand

Since we've given the "tall" text a line-height of 18px , the difference between font-size and line-height is 6 pixels. In this case, though, the half-leading of 3 pixels is added to the content area, not subtracted (since the line-height is more than the font-size). This will result in an inline box 18 pixels tall, and its top is aligned with the top of the line box. Thus Figure 8-56.

rect(0, 20px, 20px, 0)

The only values permitted with rect(...) arelength values and auto, which is the same as"set the clipping edge to the appropriate content edge."Thus, the following two statements mean the same thing:

overflow-clip: rect(auto, auto, 10px, 1cm);overflow-clip: rect(0, 0, 10px, 1cm);

It is possible to set negative lengths, though, which will expand the