Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 25th of May 2015 09:08:02 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.


The meaning of these values is shown in Table 7-1.

Table 7-1. Values of the list-style property and their results

These properties can only be applied to any element that has a display of list-item , of course, but CSS doesn't distinguish between ordered and unordered


Library Navigation Links

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

The element's box is offset by some distance. Its containingblock is the area that the element would occupy if it were notpositioned. The element retains the shape it would have had were itnot positioned, and the space that the element would ordinarily haveoccupied is preserved. Relative positioning is accomplished bygenerating the element as though it were set tostatic, and then simply shifting theelement's box (or boxes, in the case of an inline element thatcrosses multiple lines). It is possible that the positioned elementwill overlap other content. The direction and magnitude of the offset inline elements; the left and right sides are a different storyaltogether. We'll start by considering the simple case of asmall inline element within a single line, as depicted in Figure 7-22.

Figure 7-22

Figure 7-22. A single-line inline element with a left margin

Here, if we set values for the left or right margin, they will bevisible, as Figure 7-23 makes obvious:

B {margin-left: 10px; background: silver;}
Figure 7-23

Figure 7-23. An inline element with a left margin