Thursday 17th of April 2014 05:34:08 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
/*   assume only two faces for this example: 'Regular' and 'Bold'   */P {font-weight: 900;}   /* as bold as possible, which will look 'bold' */P SPAN {font-weight: 700;}   /* this will also be bold */STRONG {font-weight: lighter;}   /* lighter than its parent */B {font-weight: lighter;}   /*lighter still */<P>900 <SPAN> 700 <STRONG> 400 <B> 300 <STRONG> 200</STRONG></B></STRONG></SPAN>.</P><!-- ...or, to put it another way... -->
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.

Figure 7-34

Figure 7-34. Equivalent style rules

In case you're wondering, under CSS1, there is no way todirectly set the style for only a single side using something likeborder-top-style, since no such property exists inCSS1 (although that property, and others like it, were introduced inCSS2). You can, however, sneak around this limitation by declaringthe style for a given border using one of the shorthand propertieswe'll discuss later in the chapter.

what's coming soon -- or, if you're reading this book a year or three after its publication, what can be done.

You may notice that, unlike other chapters, almost none of the figures in this chapter was generated with a web browser. This is something of a statement about the reliability and consistency of positioning implementations at the time of this writing: not one of them was solid enough to trust completely. It was actually easier to draw theoretical examples by hand than to take screenshots in web browsers and then retouch them in Photoshop.

Figure 7-70

Figure 7-70. A floating image with negative top and left margins

The math in this situation works out something like this: assume thetop inner edge of the DIV is at the pixel position100. The browser, in order to figure out where the top inner edge ofthe floated element should be will do this: 100px+ (-15px)margin + 0padding =85px . Thus the top inner edge of the floatedelement should be at pixel position 85.