Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 24th of April 2014 03:49:42 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 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.


As we can see from Figure 8-22, the paragraph hassimply been pulled upward by its negative top margin, such thatit's outside the parent DIV !

Figure 8-22

Figure 8-22. The effects of a negative top margin

With a negative bottom margin, though, it looks as though everythingfollowing the paragraph has been pulled upward. Compare the followingmarkup to the situation shown in Figure 8-23:

Library Navigation Links

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

added to the largest positive margin (20px ), yielding (20px-18px = 2px ). Thus, there are only two pixels between the bottom of the list item's content and the top of the paragraph's content. This is what we see in Figure 8-24.

Figure 8-24

Figure 8-24. Collapsing margins and negative margins, in detail

There is one area of unresolved behavior, which is this: if elements overlap each other due to negative margins, which elements are "on top?" You'll note that few of the examples inknow that it should assign a font-weight ofbold (or bolder) toB elements. Similar problems can arise when usingSTRONG, or any other element that would ordinarilycall for boldface text.

The solution is simple enough. Just make sure that you set anexplicit font-weight for these elements. A goodrule to include in your style sheet would be:

In case you're wondering, there is no way to control the repeat any more than we've already discussed. There is no repeat-left, for example, although it could certainly be added in some future version of CSS. For now, you get full tiling, horizontal tiling, vertical tiling, or no tiling at all. Repeating: Real-world issues

There are a few things to keep in mind when it comes to web browsers. First is that in Navigator 4 and Internet Explorer 4, tiling only