Friday 19th of January 2018 12:53:31 AM by side under identical lighting conditions, the background colorwould look different on each machine. This also crops up in graphicscreated for the Web, in that graphics created on Windows machinestend to appear darker to Macintosh users, whereas images created on aMacintosh look lighter for Windows users.

The situationdegrades even further when colors are printed, since factors asdiverse as the stock and color of the paper used, and even thetemperature of the printing mechanism, can affect how well colors arereproduced on paper.

In effect, this is yet anotherarea where you must remember that total control over document

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.

background image, they are interpreted as offsets from the top left corner of the element. The offset point is the top left corner of the background image; thus, if you set the values 20px 30px , the top left corner of the background image will be 20 pixels to the right of, and 30 pixels below, the top left corner of the containing element, as in Figure 6-43:

BODY {background-image: url(bg23.gif);
background-repeat: no-repeat;
background-position: 20px 30px;}
left and has left and top margins of -15px . Thisimage is placed inside a DIV that has no padding,borders, or margins. The result will be as shown in Figure 7-70.

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) your content to overflow the element. For now, however, let's concentrate on ways to deal with its width and height. You could try explicitly assigning a width and height, like this:

top: 10%; bottom: 20%; left: 50%; right: 10%; width: 30em; height: 15em;

However, this approach seems a little heavy-handed, and could have disastrous consequences in small browsing environments like handheld devices. Furthermore, it forces you to declare a specific height and width, which gives up a lot of flexibility. Wouldn't it be better to define certain limits for the size of the height and width?up with 6-point text (12 x 0.8 x 0.8 x 0.8 = 6.144). Many complicated pages have at least three levels of nesting, and sometimes even more.

11.2.7. Preserving Boldness