Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 19th of January 2017 01:51:46 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

  1. The containing block of the "root element" (also called the initial containing block) is established by the user agent. In HTML, the root element is the HTML element, although some browsers may incorrectly use BODY.

  2. For nonroot elements that are not absolutely positioned, the 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.

    generate a list of style alternatives. So you could write thefollowing:

    <LINK REL="stylesheet" TYPE="text/css"HREF="sheet1.css" TITLE="Default"><LINK REL="alternate stylesheet" TYPE="text/css"HREF="bigtext.css" TITLE="Big Text"><LINK REL=" alternate stylesheet " TYPE="text/css"HREF="spoken.css" TITLE="Spoken Word">

    Users could then pick the outer edge, as detailed in Figure 8-43.

    Figure 8-43

    Figure 8-43. The details of floating up and left with negative margins

    The math in this situation works out something like this: assume the top inner edge of the DIV is at the pixel position 100. The browser, in order to figure out where the top inner edge of the floated element should be will do this: 100px + (-15px) margin + 0 padding =