Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 26th of July 2016 02:11:42 PM

0.3. How to Contact Us

We have tested and verified the information in this book to the best of our ability, but you may find that features have changed (or even that we have made mistakes!). Please let us know about any errors you find, as well as your suggestions for future editions, by writing to:

O'Reilly & Associates, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

(800) 998-9938 (in the U.S. or Canada)

Therefore, the last item in the list has a bottom margin of 20 pixels, the bottom margin of the UL is 10 pixels, and the top margin of a succeeding H1 is 28 pixels. Given all this, once the margins have been collapsed (or, if you prefer, overlapped), the distance between the end of the LI and the beginning of the H1 is 28 pixels, as shown in Figure 7-17.

Figure 7-17

Figure 7-17. Collapsing in detail

This collapsing behavior only applies to margins. Padding and

(707) 829-0515 (international/local)

(707) 829-0104 (fax)

You can also send us messages electronically. To be put on the mailing list or request a catalog, send email to:

To ask technical questions or comment on the book, send email to:

We have a web site for the book, where we'll list examples, errata, and any plans for future editions. You can access this page at:

For more information about this book and others, see the O'Reilly web site:

Library Navigation Links

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

name="INDEX-1381" />margin-rightIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This sets the size of the right margin of an element. Negative values are permitted, but caution is recommended.

margin-topIE4 P/P IE5 P/Y NN4 P/P Op3 Y/-

This sets the size of the top margin of an element. Negative values are permitted, but caution is recommended.


paddingIE4 P/P IE5 P/Y NN4 B/B Op3 B/-

This sets

In fact, this can be used to match any value with a similar format. For example, if you have images with ALT text of fig-1, fig-2, fig-3, and so on, and want to match any of them, you could use this selector:


This is a less likely use for |=, but it's still perfectly valid. Note that the previous rule would not match attribute, or all elements that have a class of some type:

A[name] {color: purple;}      /* colors any NAME anchor purple */
IMG[border] {border-color: blue;}  /* sets blue border for any bordered IMG */
[class] {color: red;}        /* sets any classed element red */

In none of these situations does it matter what value is assigned to the attributes of each element. As long as the given attribute is present for the element, the element will match the selector shown. Thus, in the following example, the first two IMG elements shown will match the preceding rule, whereas the third will bullets, as you can see in Figure 7-81.

Figure 7-81

Figure 7-81. Using images as bullets

Of course, you should exercise care in the images you use, as this example makes painfully clear (shown in Figure 7-82):

UL LI {list-style-image: url(big-ohio.gif);}
Figure 7-82

Figure 7-82. Using really big images as bullets

You should usually provide a fallback for the bullet type. Do this justthe border's width was set to be 20px , when the style is set to none, not only does the border's style go away, so does its width! Why?

Figure 7-41

Figure 7-41. The incredible disappearing border

If you'll remember, the terminology used in the previous section was that a border with a style of none does not exist. Those words were picked carefully because they help explain what's going on here. Since the border doesn't exist, it can't have any width, so the width is automatically