Saturday 01st of October 2016 05:25:24 PM

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

IMG {float: left; margin-left: -2.5em;}

There is a potential danger here. Our floated images have a leftmargin of 2.5em, but if you'll recall, the column itself has aleft margin of 10%. In a sufficiently narrow browser window, the leftmargin of the column could end up being much less than 2.5em. If thathappens, then the images could get pushed far enough to the left thatthey go partway "offscreen." Mixingunits like this, even | 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.

If you'll remember, the terminology used in the previoussection was that a border with a style of nonedoes not exist. Those words were picked carefully because they helpexplain what's going on here. Since the border doesn'texist, it can't have any width, so the width is automaticallyset to 0 (zero). This may seem completelybackward, but it actually makes a great deal of sense. After all, ifa drinking glass is empty, you can't really describe it asbeing half-full of nothing. You can only discuss the depth of aglass's contents if it has actual contents. In the same way,respect to the canvas. Thus, both background patterns begin tiling from the top left corner of the document, not the individual elements. For the BODY, we can see the entire repeat pattern. For the H1, however, the only place we can see its background is in the padding and content of the H1 itself. Since both background images are the same size, and they have precisely the same origin position, they appear to "line up" as shown in Figure 6-57.


How about those columns, though? In order to get these columns todisplay properly, we were forced to enclose each column in its ownDIV. While this approach is certainly preferableto using tables, it still requires us to do some small violence tothe structure of the page -- and trying to create visual effectsby adding elements is never a good idea. It would be far better tosimply set the BODY contents to be flowed into twocolumns. Unfortunately, CSS2 contains no provisions forcolumns or column flow. There have been this would have the effect of setting that color on all inputs, from text to radio-button to checkbox inputs:

SELECT {color: rgb(33%,33%,33%);}
INPUT {color: gray;}
Figure 6-12

Figure 6-12. Changing form element foregrounds

Note in Figure 6-12 that the text color next to the checkboxes is still black. This is because we've only assigned styles to elements like INPUT and SELECT, not normal paragraph (or other) text.