Friday 19th of September 2014 01:49:58 PM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book


Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y

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 just in case your image doesn't load, or gets corrupted, or is in a format that some user agents might not be able to display (as is the case in Figure 7-83). Therefore, you should always define a backup list-style-type for the list:

UL LI {list-style-image: url(ohio.bmp); list-style-type: square;}
| Z

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

method we just discussed, only shorter. #6FA would be the same as #66FFAA, and #FFF would come out #FFFFFF, which is the same as white. This approach is sometimes called shorthand hex notation.

One thing to watch out for is that with the hexadecimal methods, unlike the numeric methods, there are no defined clipping methods for the hex-pair systems. If you enter an invalid value, theall lists (ordered or unordered) will use discs as the bullet for each item. In fact, that's up to the user agent to decide. Even if the user agent doesn't have a predefined rule such as OL {list-style-type: decimal;}, it may prohibit ordered bullets from being applied to unordered lists, and vice versa. You can't count on this, of course, so be careful.

If you wish to suppress the display of bullets altogether, then none is the value you seek. doing here. After we look at three different page (re)design projects using CSS, we'll go through a grab bag of tricks and tips that might help you get around some of your biggest CSS frustrations.

11.1. Conversion Projects

Since we've covered the entirety of CSS1, let's exercise that newfound knowledge with three conversion projects. In each of these cases -- two of them web pages and one a print magazine article -- we'll20-pixel borders as depicted in Figure 7-39:

P {margin: 5px; background-color: silver;border-style: solid; border-width: 20px;}
Figure 7-39

Figure 7-39. Inflating the border width to unhealthy levels

This is all as expected: the style and width combine to create aborder whose color is based on the foreground color of the element.

It's also possible to setwidths for individual sides. This is done