Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 25th of April 2015 12:55:15 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. VGA colors, andbrowsers are supposed to generate colors that at least come close tomatching those original 16. They may be a fairly motley collection ofcolors, but they're what we have.

So let's say we want all first-level headings to be maroon. Thebest declaration would be:

H1 {color: maroon;}

Simple, straightforward, and difficult to forget. It doesn't

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.

first image is known as the origin image , and it's very important to understanding the next section.

Figure 6-48

Figure 6-48. Use of the background-position property sets the origin of the tiling pattern

As it happens, the positioning of backgrounds does contradict something I said earlier. background-position is the only background property with restrictions, as it may only be applied to block-level and replaced elements; background image positioning cannot be done on inline elements such

In theory, a user agent would have to double the size of anchor textas the pointer hovers over it, which could well cause major redisplayissues. An author could cause similar problems by declaring thatTEXTAREA elements should change their size whenthey are in focus. User agents are not required to reflow thedocument based on styles assigned to these pseudo-elements, althoughsome may do so -- it remains to be seen.

Similar to rules 4 and 5, this further limits the upward floating ofan element by preventing it from being above the top of a linecontaining content that precedes the floated element. Let's saythat, right in the middle of a paragraph, there is a floated image.The highest the top of that image may be placed is the top of theline box from which the image originates. As you can see in Figure 8-35, this keeps images from floating too farupward.

Figure 8-35

Figure 8-35. Keeping floats level with their context

is the distance between the elements.

To see what this means, let's start with a paragraph that has a negative top margin and no margins on its other sides -- this will keep the example simple. In addition, we'll make the paragraph bold, so that it's easier to distinguish from its neighbors:

<P STYLE="margin: -1.75em 0 0 0; font-weight: bold;">
This paragraph has a negative top margin...
line-height to increase. What is increased is the height of the line box. Therefore, if a line's height is 14px, and an element within that line is vertically aligned to 50%, and within that same line, there is an image 50 pixels tall, you get the result shown in
Figure 4-42:

SUP {vertical-align: 50%;}
Figure 4-42

Figure 4-42. Vertical alignment with a percentage and a tall image

The 50%-aligned element has its baseline raised 7