Friday 19th of January 2018 12:53:53 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 Technically, it can be commas -- but the CSS2 specification contains examples both with and without commas and defines rect as accepting both the comma and noncomma versions. This text will stick to the comma version mostly because it makes things easier to read.

It is extremely important to note that the values for rect(...) are not side-offsets. They are, instead, distances from the | 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
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.

marketplace, and rather than force Microsoft to change the browser and thus potentially cause existing pages to break, the standard was changed to reflect implementation. This means, sadly, that it is impossible to set a consistent clipping rectangle in situations where the height and width are not precisely defined. For example, there is no way to create a clipping rectangle that is 1 em larger than this element's content area:

position: absolute; top: 0; bottom: 50%; right: 50%; left: 0;

Since there is no way to know how many ems tall or wide the element font-variant before wrapping up the font properties.

5.4.1. Fonts with Style

font-style is very simple: it's used to select between normal text, italic text, and oblique text. That's it! The only complications are in recognizing the difference between italic and oblique text and knowing why browsersand perhaps they will be added in the future. For now, we're forced to do things like add DIVs to represent columns.

This assumes that you wish to create columns at all, of course. We went to a great deal of effort to get those columns, but was it really worth it? Multiple-column layouts can be very difficult to read on a monitor, since the user may be forced to scroll downward to read the first column, then back up to the top of the second, then down again. Adding the columns was an interesting theoretical wider when it hits 400 pixels. The appropriate styles are:

left: 0%; right: auto; width: 75%; max-width: 400px;

The great advantage of the min-max properties is that they let you mix units with relative safety. You can set percentage-based sizes while setting length-based limits, or vice versa.


These min-max properties can be very useful in conjunction with loated elements as well. For example, you

9. A left-floating element must be put as far to the leftas possible, a right-floating element as far to the right aspossible. A higher position is preferred to one that is further tothe right or left.

Again, this rule is subject to restrictions introduced in thepreceding rules. There are similar caveats here as in Rule 8,although they are not quite so fuzzy. As you can see from Figure 8-38, it is pretty easy to tell when an element has