Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 24th of February 2017 01:52:40 PM

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 while dramatically improving accessibility and backward not the viewport. If you want to position elements so that they're placed relative to the viewport and don't scroll along with the rest of the document, then the next section is for you.

Before we get there, however, there are a few more things to cover. Remember that absolutely positioned boxes can have backgrounds, margins, borders, and padding; styles can be applied within them, just as with any other element. This can make them very useful for the creation of sidebars, "sticky 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.

if it's emphasized or boldfaced or whatever. Of course, if youwant such elements to be different colors,that's easy enough, as illustrated by Figure 6-9:

P {color: maroon;}EM {color: #999999;}
Figure 6-9

Figure 6-9. Different colors for different elements

Thanks to the inheritability of color, it's theoretically possible toset all of the ordinary text in a document to be a color such as redby declaring BODY {color:so the inline box is 12px high. For the boldfacedtext, however, the difference between font-sizeand line-height is 12px . Thisis divided in half to determine the half-leading(6px), and the half-leading is subtracted fromboth the top and bottom of the content-height to arrive at an inlinebox which is, in this case, 12px high. This12-pixel inline box is centered vertically within the content-heightof the element.

of effect was to fake it. Now all you need is alist-style-image declaration.

list-style-image

Yes, that's really all there is to it. One simpleurl value, and you're putting images in forbullets, as you can see in Figure 7-81.

Figure 7-81

Figure 7-81. Using images as bullets