Thursday 19th of January 2017 01:53:25 PM

left of the containing block are the top and left content edges ofthe first box in the ancestor, and the bottom and right edges are thebottom and right content edges of the last box. In right-to-leftlanguages, the right edge of the containing block corresponds to theright content edge of the first box, and the left is taken from thelast box. The top and bottom are the same.

If there is no such ancestor, then the content edge of the rootelement is used to establish a containing block. 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: U

U element: 4.1.6. Text Decoration
UA (see user agent)
underlining: 4.1.6. Text Decoration
changing color of: Weird decorations
removing from hyperlinks: 4.1.6. Text Decoration
turned off by browsers: Weird decorations
Uniform Resource Identifier (URI): 3.5. CSS2 Units
Uniform Resource Locators (see URLs)
units: 11.1.3. Case 3: Putting a Magazine Article Online
(see also length units; CSS2 units)
for aural style sheets: 3.5. CSS2 Units
avoiding mixing: 11.1.3. Case 3: Putting a Magazine Article Online
color: 3.6. Summary
universal selector: Universal selector
unordered lists: 7.7.1. Types of Lists
unvisited anchors: 2.4.1. Pseudo-Class Selectors
uppercase text: 4.1.5. Text Transformation
upright text: 5.4.1. Fonts with Style
URI (Uniform Resource Identifier): 3.5. CSS2 Units
URLs (Uniform Resource Locators): 3.4. URLs
HREF attribute and: LINK attributes
referring to in style sheets: 3.4. URLs
specifying for images: 6.2.1. Background Images
user agent (UA): 2.2.2. Grouping Declarations
2.2.2. Grouping Declarations
(see also browsers)
users, selecting alternate style sheets: Alternate style sheets

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.

Figure 8-19:

igure 8-19. Wider children through negative margins

Yes, the child element is wider than its parent! This ismathematically correct: 10 +50 = 400. Even though this leads to a child elementsticking out of its parent, technically the specificationhasn't been violated, because the values of the sevenproperties add up to the required total. It's a semantic dodge,but it's valid behavior. fonts. For example, the font family known as Zurich has a number of variants such as Zurich Bold, Zurich Black, Zurich UltraBlack, Zurich Light, and Zurich Regular. Each of these uses the same basic font, but each has a different weight.

So let's say that you want to use Zurich for a document, but you'd like to make use of all those different heaviness levels. You could refer to them directly through the font-family property, but you really shouldn't have to do that. Besides, it's no fun having to

As we can see in Figure 6-34, the very small image triplebor.gif is repeated vertically along the left side of the heading element, resulting in an effect that isn't otherwise possible.

Figure 6-34

Figure 6-34. Creating a "triple border" on H2 elements

We can take that further and decide to set a wavy border along the top of each H1 element, as illustrated in Figure 6-35. The image is colored in such a way that it blends with the background color and produces the wavy effect shown:

A:link {border: 5px solid blue;}

If you don't set a large enough line-height to accommodate the border, it will be in danger of overwriting other lines, as shown in Figure 8-62.

Figure 8-62

Figure 8-62. Inline borders can be overlapped

One solution is to increase the line-height of the paragraph. This will affect every line in the entire element, not just the line in which the bordered hyperlink appears:<IMG SRC="test.gif" STYLE="display: block; height: 50px;" ALT="test image"> <IMG SRC="test.gif" STYLE="display: block; height: 200px;" ALT="test image">

This is exactly the same as using the HEIGHT attribute on the IMG tag in HTML. If an image is 100 pixels tall, then by default its height will be 100px . If you specify another value, then the image will be scaled appropriately, as illustrated in Figure 8-28.

Figure 8-28

Figure 8-28. Scaling images with the height property

In almost all other ways, block-level replaced elements behave the