Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 25th of July 2016 10:06:45 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

P {width: 100px; margin-left: auto; margin-right: auto;}
Figure 8-14

Figure 8-14. Setting an explicit width

This is the correct way to center block-level elements, as a matter of fact. text-align is supposed to apply to only the inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it. Instead, you should declare:

P {margin-left: auto; margin-right: auto; width: 50%;}
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.

padding-topIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This property sets the size of the top padding of an element, and this padding will "inherit" the element's background. Negative values are not permitted.

Example

text-alignIE4 Y/P IE5 Y/Y NN4 Y/P Op3 Y/-

This sets the horizontal alignment of the text in an element, or more precisely, defines to which side of the element the line-boxes are aligned. The value justify is supported by programmatically adjusting the letter- and word-spacing of the line's content, and results leaves only an explanation of the difference betweenitalic and oblique text. Forthat, it's easiest to turn to Figure 5-24,which illustrates the differences very clearly.

Figure 5-24

Figure 5-24. Italic and oblique text in detail

Basically, italic text is in some way its own font, with smallchanges made to the structure of each letter to account for thealtered appearance. This is especially true of serif fonts, where inaddition to the fact that the text characters "lean," the

5.4.1. Fonts with Style

font-style is very simple: it's used toselect between normal text,italic text, and oblique text.That's it! The only complications are in recognizing thedifference between italic and oblique text and knowing why browsersdon't always give you a choice anyway.

define a backup list-style-type for the list:

UL LI {list-style-image: url(ohio.bmp); list-style-type: square;}
Figure 7-83

Figure 7-83. Providing fallbacks for unusable images

The other thing you can do with list-style-image is set it to the default value of none. This is good practice because list-style-image is inherited -- so any nested lists will pick up the image as the bullet, unless you prevent this from happening: