What's depicted in Figure 9-2, and in most of the examples in this chapter, will only work if the containing block was established by an element with an explicitly defined height. This is because a line in the specification says that if the height of the containing block is not explicitly specified -- say, for example, that it's dependent on the content of the element, as in a normal paragraph -- then both top and bottom for any positioned element within that containing block are treated as auto. Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 04th of December 2016 04:52:05 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 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.

This rule matches any EM text that is a descendant of a list item, as long as that list item is a child of an OL element that is a descendant of a DIV. (Note also that there is no whitespace around the > symbol this time, which is legal; whitespace around this symbol is optional.) Thus:

The purple EM text is purple because it's the great-grandchild of an LI that is the direct child of the OL, and the OL is

Applies to

all elements


Percentage values refer to the width of the parent element.

section, since we're concentrating on background-image for the moment. We'll come back to why setting a color is a good idea later on in the chapter.

A background image can be applied to any element, whether block-level or inline. BODY is the most common element to which backgrounds are applied, of course, but there's no need to stop there. For example:

P.starry{background-image: url(http://www.site.web/pix/stars.gif);