Wednesday 07th of October 2015 08:28:47 AM

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

If you have a document that is grouped into sections, you might notwant the floated elements from one section hanging down into thenext. In that case, you'd want to set the first element of eachsection to prohibit floating elements from appearing next to it. Ifit might otherwise be placed next to a floated element, it will bepushed down until it appears below the floated image, and allsubsequent content will appear after that, as shown in Figure 7-73.

Figure 7-73

Figure 7-73. Displaying an element in the clear

Library Navigation Links

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

the only real difference that here, the uppercase letters are of different sizes. That's true, but the reason that small-caps is declared using a font property is that some fonts have a specific small-caps face. Thus, a font property is used to select that face.

What happens if no such face exists? There are two options provided in the specification. The first is for the user agent to create a small-caps face by scaling uppercase letters on its own. The second is simply to make all letters uppercase and the same size, exactly as correct behaviors are shown in Figure 8-37.

Figure 8-37

Figure 8-37. Given the other constraints, go as high as possible


Unfortunately, since there is no precise definition meaning for"as high as possible" (which could be, and in fact hasbeen, argued to mean "as high as conveniently possible"),you cannot rely on consistent behavior even among browsers that areconsidered CSS1-compliant. Most browsers will follow historicalpractice and float the image down into the next line, but amargin of 2.5em, but if you'll recall, the column itself has a left margin of 10%. In a sufficiently narrow browser window, the left margin of the column could end up being much less than 2.5em. If that happens, then the images could get pushed far enough to the left that they go partway "offscreen." Mixing units like this, even indirectly, can be risky. A better choice might be this:

IMG{float: left; margin-left: -10%;}