Wednesday 28th of June 2017 07:15:03 AM

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: E

element boxes: 7.1. Basic Element Boxes
8.1. Basic Boxes
element clipping: Element clipping
element selectors: 2.1.1. Rule Structure
classification of: 2.9. Classification of Elements
floated (see floated elements)
overlapping, altering: 9.5. Stacking Positioned Elements
styling common: 11.2.4. Styling Common Elements
visibility of: 9.1.5. Element Visibility
elevation property: 10.8.2. The Spoken Word
Figure 7-60

Figure 7-60. Padding on an inline element

Note the extra background space that appears on either end of theboldfaced text. There's your padding.

This all seems familiar enough, even when the boldfaced textstretches across multiple lines. Turn to Figure 7-61to see what happens with padding set on an inline element displayedacross multiple lines:

B {padding: 10px; background: silver;}
em box: 5.3. Font Size
em-height (em): em and ex units
em length value: 5.3.3. Percentages and Sizes
em square: 5.3. Font Size
embedded style sheets: 1.4.2. The STYLE Element
ex-height (ex): em and ex units
Extensible Markup Language (see XML)
external style sheets: 1.4.1. The LINK Tag
creating: 11.1.1. Case 1: Consistent Look and Feel
with @import directive: 1.4.3. The @import Directive
with LINK element: 1.4.1. The LINK Tag
extra space around elements, adding: 7.2. Margins or Padding?
7.2. Margins or Padding?
(see also margins)

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

Library Navigation Links

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

H1 {font-family: 'Zurich UltraBlack', sans-serif;}
H2 {font-family: 'Zurich Black', sans-serif;}
H3 {font-family: 'Zurich Bold', sans-serif;}
H4, P {font-family: Zurich, sans-serif;}
SMALL {font-family: 'Zurich Light', sans-serif;}

Besides the obvious tedium of writing such a style sheet, it only works if everyone has these fonts installed, and it's pretty safe bet that most people don't. It would make far more sense to specify a single font family for the whole document and then assign weights to various elements. You can do this, in theory, using may have already defined a list-style-type for UL UL, so the value of square won't be inherited after all. Your browser may vary.

In the case of ordered lists, CSS2 goes a great deal further than CSS1 to provide control over the ordering. For example, there is no way in CSS1 to automatically create subsection counters such as "2.1" or "7.1.3." This can, however, of one-half em and side margins that are 10% of the width of the browser window, you can declare the following, shown in Figure 7-12:

Figure 7-12. Mixed margins

Here, although the top and bottom margins will stay constant in any situation, the side margins will change based on the width of the browser window. This of course assumes that all H1 elements are the child of the BODY element and that BODY is as wide as the browser window. More properly stated, the side margins of H1 elements elements are the child of the BODY element andthat BODY is as wide as the browser window. Moreproperly stated, the side margins of H1 elementswill be 10% of the width of the H1's parentelement.

Let's revisit that example for a moment:

Seems a little redundant, doesn't it? After all, you have totype in the same pair of values twice. Fortunately, CSS offers aneasy way to avoid this. </TR></TABLE>

Figure 4-22

Figure 4-22. Using the white-space: nowrap property to suppress wrapping in table cells.


Although white-space may seem like an insanelyuseful property, as of this writing, it isn't supported byanything except IE5 for Macintosh and preview builds of Netscape 6.Not even the ability to use nowrap for table cellsis available in other browsers, despite the fact that it would seemto be a very simple behavior to support.