Sunday 25th of February 2018 10:11:28 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 | Y | Z

Index: W

warning text
boldface, setting: 2.3. Class and ID Selectors
color, setting: 6.1.1. Foreground Colors
W3C (World Wide Web Consortium): 1.2. CSS to the Rescue
web browsers (see browsers)
web-safe colors: 3.1.2.6. Web-safe colors
weight sorting: 2.8. The Cascade
whitespace
greater-than symbol (>) and: 10.2.1.2. Child selector
handling: 4.1.1.3. Handling whitespace
ignored in style sheets: 2.2.2. Grouping Declarations
white-space property: 4.1.1.3. Handling whitespace
widows property: 10.8.1. Paged Media
width
block-level elements: 8.2.2. Horizontal Formatting
borders: 7.4.2. Border Widths
elements: 7.1. Basic Element Boxes
floating text, declaring for: 7.6.1. Floated Elements
limiting via min-max properties: 9.1.3.2. Limiting width and height
positioning and: 9.1.3. Width and Height
width property: 7.1. Basic Element Boxes
9.1.3.1. Setting width and height
Explorer did inherit colors onto HR elements, while they didn't allow the colors to inherit onto form elements. This is more of a problem with inheritance than it is with color, but unfortunately the problem is still there. In fact, even today it's possible to find browsers that have predefined colors for things like tables, which prevent BODY colors from inheriting into table cells:

BODY {color: red;}
TABLE {color: black;}
Windows VGA colors: 3.1.1. Named Colors
word spacing: 4.1.4. Word Spacing and Letterspacing
word-spacing property: 4.1.4.1. Word spacing
alignment and: 4.1.4.3. Spacing, alignment, and font size
World Wide Web Consortium (W3C): 1.2. CSS to the Rescue


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.

SPAN.change {position: absolute; top: 0; left: -5em; width: 4em;font-weight: bold;}P {margin-left: 5em; position: relative;}<P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut <SPAN CLASS="change">***</SPAN>laoreet dolore magna aliquam erat volutpat.</P>

While this does rely on inserting an extra element, the advantage isthat the SPAN can be placed anywhere in theparagraph and still have the result depicted in Figure 9-21. while taking the float's presence into account. This in turn influences the generation of element boxes, which means that floats indirectly do affect these boxes.

Some particulars can help explain some of this behavior. An element that has been floated becomes a block-level element, regardless of its previous status. Thus, if an image (which is ordinarily treated as an inline element) is floated, it becomes a block-level element. This block-level status helps explain why when an element is floated, other content flows around it.

There is one other thing you can do to influence the appearance of list items under CSS1, and that's change the position of the bullet itself, in relation to the content of the list item. This is accomplished with list-style-position.

list-style-position

If a bullet's position is set to value -- percentage or length -- then the height of thepositioned element is constrained. As a demonstration, let'sset bottom to be a specific value, with the resultshown in Figure 9-6:

top: 0; bottom: 10%; left: auto; right: 0; width: 33%; height: auto;
Figure 9-6

Figure 9-6. Defining a height by using an explicit bottom

In this case, the height of the element must be90% the height of the containing block, since 100% -- 10% = 90%. This assumes, of course, that there have been no