Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 21st of November 2014 02:53:01 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 implemented quickly. Therefore, while you might not be able to do everything described here as soon as you read this, expect most (if not all) of this to be included in browsers released in the year 2000 or later.

First, in addition to the existing selector mechanisms like contextual selectors, we have several new selector symbols that will make it a lot easier to construct very specific, very sophisticated selections -- without having to resort to sprinkling classes or IDs throughout the whole document. 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.

BODY {color: black; background-color: white;}P {color: #333;}PRE, CODE, TT {color: rgb(50%,50%,50%); background-color: #FFFFCC;}A:link {color: blue; background-color: yellow;}A:visited {color: navy; background-color: white;}
Figure 6-20

Figure 6-20. The results of a more sophisticated style sheet

This is but the tiniest beginning of what's possible, ofcourse. By all means, try some examples of your own! Adding box properties

After everything else, applyingmargins, borders, and padding to inline replaced elements almostseems simple.

Padding and borders are applied to replaced elements as normal;padding inserts space around the actual content (for example, a

Since the line-height for the "tall"text is less than its font-size, the inline boxfor that element is smaller. This will change the placement of thetext itself, since the top of its inline box must be aligned with thetop of the line box for its line. Thus we get the result shown inFigure 8-55.

Figure 8-55

Figure 8-55. The effects of a very small inline box

On the other hand, we could set the "tall" text to have aline-height which is actually bigger than its element in page. 

You can include   characters between images to make sure they always display on the same line, but you'll get little blank spaces between them.  A better alternative is to do multi-image layouts in tables (see separate chapter).

Pay attention to the file sizes of your images!  Web-surfers are often impatient, and may not wait for large images to load.  You can keep your visitors' attention with interleaved GIFs and progressive JPEG's, which appear quickly at coarse resolution and gradually sharpen, or you can referrence a small, low-resolution version of your image in