Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 28th of April 2017 06:24:42 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 of the divided difference is referred to ashalf-leading.

Thus, for each bit of text where both thefont-size and line-height are12px , nothing is applied to the content-height(since 12 minus 12 equals zero, and half of nothing is nothing), andso the inline box is 12px high. For the boldfacedtext, however, the difference between font-size 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.

effects are a little different.

Let's say that you want to set top and bottom margins onboldfaced text. You declare:

B {margin-top: 25px; margin-bottom: 50px;}

This is allowed in the specification, but it will have absolutely noeffect on the line height, and since margins are effectivelytransparent, this will have no visual effect whatsoever -- as youcan see for yourself in Figure 7-21.

<TABLE border cellpadding="4"><TR><TD CLASS="home"><A HREF="home.html">Home Page</A></TD><TD CLASS="read"><A HREF="read.html">My Writing</A></TD><TD CLASS="fun"><A HREF="fun.html">Fun Stuff!</A></TD><TD CLASS="links"><A HREF="links.html">Other Links</A></TD><TD CLASS="write"><A HREF="write.html">Contact Me</A></TD></TR></TABLE>
Figure 7-67

Figure 7-67. Floating an image

Nothing unusual there, of course, but look what happens when we set the first paragraph to have a background, as has been done in Figure 7-68.

Figure 7-68

Figure 7-68. Floating images and element backgrounds

There is nothing different about the second example, except for the visible background. As you can see, the floated image sticks out of the bottom of its parent element. Of course, it did so in the first example, but it was less obvious there because we couldn't see the background then. There is nothing forbidden about this behavior.