Friday 03rd of July 2015 02:17:19 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.

Figure 11-6

Figure 11-6. The original print document

Obviously, the folks at Meerkat Monthly have been having some fun with their desktop publishing program. It won't be easy to get everything just the way it is on the page, but we'll see what we can do.

First, let's take apart the page's layout and determine what to eliminate. Since there are no pages on the Web, we can drop the page number. Also, the outer margins can be modified to suit our needs, since we don't have to worry about leaving extra space width, or if the space should be thicker or thinner than the lines. All of these things are left up to the user agent to decide.

All of the borders shown in Figure 7-30 are based on a color of gray, which makes all of the effects easier to see. The look of a border style is always based in some way on the color of the border, although the exact method may vary between user agents. For example, Figure 7-30 illustrates two different ways of rendering an


As of this writing, only Internet Explorer 4.5 and 5 for the Macintosh and Opera 3.6 will center elements using auto margins.

The other possibility is when one of the margins and the width are set to be auto. In this case, then the margin set to be auto is reduced to zero:

it has no margins, but if it did, they would create blank spacebetween the borders and the offset edges. This would make thepositioned element appear as though it did not completely fill thelower-right quarter of the containing block. In truth, it would doso, but this would not be immediately apparent to the eye. In otherwords, the following two sets of styles would have the same visualappearance, assuming the containing block to be 100 ems high by 100ems wide:

top: 50%; bottom: 0; left: 50%; right: 0; margin: 10em;
properties: if you omit a value, the default will be filled in
automatically. This can have unintended effects. Consider the

H4 {border-style: dashed solid double;}
H4 {border: medium green;}

This will result in H4 elements having no border at all, because the lack of a border-style in the second rule means that the default value of none will be used. As we've seen, that will turn the border off altogether.