Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 23rd of October 2017 02:40:36 AM

9.6. Summary

When it comes right down to it, positioning is a very compelling technology. It's also likely to be an exercise in frustration if you're trying to get it to behave consistently in a cross-browser environment. The problem isn't so much that it won't work in some browsers: it's that it will only sort of work in a number of them, such as Navigator 4 and Internet Explorer 4 and 5. It can be great fun to play with positioning, and one day we'll be able to use it in place of tables and frames

In CSS2, the range of values for display is dramatically expanded. See Chapter 10, "CSS2: A Look Ahead", for more details.


.hide {display: none;}


block | inline | list-item | none


while dramatically improving accessibility and backward compatibility. As of this writing, though, it remains a great way to create design prototypes, but a tricky thing to use on a public web site.

As it happens, this sentiment may be applied to the majority of CSS2, which is given an overview in the next chapter.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

consider the case of an element containing one very long line of text, as shown in Figure 8-45. Note that we've put a border around the line; this has been accomplished by wrapping the entire line in a SPAN element, and assigning it a border style:

SPAN {border: 1px dashed black;}
Figure 8-45

Figure 8-45. A single-line inline element

This is the simplest case of an inline element contained by a block-level element, no different in its way than a paragraph withbullet numbering system to be used in either an unordered or ordered list, depending on the value specified. This property applies to elements with a display value of list-item.


UL {list-style-type: square;}
OL {list-style-type: lower-roman;}
marginIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This sets the size of the overall margin of an element. Vertically adjacent method of setting color using raw numbers. These numbers are on a scale from to 255, where rgb(0,0,0) represents black and rgb(255,255,255) represents white. Most of you will recognize this number range from other sources: it's the decimal equivalent of an 8-bit binary number. If you don't recognize this, then it's enough to know that computers employ binary values (on/off ) for everything, including representations ofvariant of the font, and 900 as the heaviest.

In fact, there is no intrinsic weight in these numbers. The CSS specification says only that each number corresponds to a weight at least as heavy as the number that precedes it. Thus, 100, 200, 300, and 400 might all map to the same relatively lightweight variant, while 500 and 600 could correspond to the same heavier font variant, and 700, 800, and


By taking this approach, it's possible to take the toolbar andsplit it into a separate file, and then include that file on everypage by means of a server-side include.Includesare described in much greater detail in Web Design in aNutshell, by Jennifer Niederst, and Apache: TheDefinitive Guide, by Ben Laurie and Peter Laurie, both