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

Library Navigation Links be done under CSS2 and is briefly discussed
in Chapter 10, "CSS2: A Look Ahead".

7.7.3. List Item Positions

There is one other thing you can do toinfluence the appearance of list items under CSS1, and that'schange the position of the bullet itself, in relation to the contentof the list item. This is accomplished withlist-style-position.

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

margin , the fourth(left) is copied from the second(right). If there are two values given,the fourth is copied from the second, and the third(bottom ) from the first(top ). Finally, if there is only onevalue given, then it's copied to all the others.

This simple mechanism allows authors to supply only as many values asnecessary, as shown here:baseline -- that is, if it's an image, a form input, or another replaced element -- then the bottom of the element is aligned with the baseline of its parent, as Figure 4-31 shows:

IMG {vertical-align: baseline;}
<P>The image found in this paragraph <IMG SRC="dot.gif" ALT="a dot"> has its
bottom edge aligned with the baseline of the paragraph.</P>
Figure 4-31

Figure 4-31. Baseline alignment of an image

of whateverbackground color you may have specified.If you're completely tiling GIF, JPEG, or other opaque imagetypes, this doesn't really make a difference, sincethey'll fill up the document background, leaving nowhere forthe color to "peek through," so to speak. However, imageformats with an alpha channel, such as PNG, can be partially orwholly transparent, and this will cause the image to be combined withthe background color. In addition, if the image fails to load formargins with block-level elements such as these can quite obviously be dangerous and is rarely worth the trouble -- but it can also be rewarding. It takes a good deal of practice, and many mistakes, to learn to tell the difference between the two.

7.3.7. Margins and Inline Elements

So far, we've only talked