Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 14th of December 2017 01:52:38 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.

As it happens, this sentiment may be applied to the majority of CSS2, H1 {color: white; background-color: rgb(20%,20%,20%);}

Figure 6-18

Figure 6-18. A nifty effect for H1 elements

This shows but one example of how displays can be dramaticallychanged with just a few styles. Of course, there are as manycombinations as there are colors, but we can't exactly showthem here -- being stuck in grayscale as we are -- however,we'll try to give you some idea of what you can do. Here are afew ideas to get you started.

This is a simple style sheet, as shown in Figure 6-19: which is given an overview in the next chapter.



Library Navigation Links

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

800, since that is the next step up from 700 (the numeric equivalent to bold). Since 800 is assigned to the same font face as 700, there is no visible difference between normal H1 text and boldfaced H1 text, but nonetheless the weights are different.

In the last example, paragraphs are set to be the lightest possible font weight, which we assume exists as a Light variant. Furthermore, If you wished to suppress the underlining ofhyperlinks, a CSS rule to do sowould be:

A:link {text-decoration: none;}

The text in Figure 4-58 contains three hyperlinks:the three list items. Since we explicitly turned off linkunderlining, the only visual difference between the anchors andnormal text is the color. SELECT lists, although user agents aren't very good about that sort of thing yet -- in fact, as of this writing, no browser will correctly place images in the backgrounds of form elements.

WARNING

Just like background-color, background-image is not inherited -- in fact, none of the background properties are inherited. Remember also that