Nice and Free CSS Templates

8.2.1.1. Height

Ingeneral, the height of an element is determined by its content. Thiscan be affected by its width, of course; the skinnier a paragraphbecomes, for example, the taller it has to be in order to contain allof the textual (and other) content.

In CSS, it is possible to set an explicit height on any block-levelelement. If this is done, the resulting behavior is somewhat in case your image doesn't load, or gets corrupted, or is in aformat that some user agents might not be able to display (as is thecase in Figure 7-83). Therefore, you should alwaysdefine a backup list-style-type for the list:

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

Figure 7-83. Providing fallbacks for unusable images

The other thing you can do with list-style-imageis set it to the default value of none. This isgood practice because list-style-image is sets them to be 3px , 2px , and 1px . Whatever width the user agent uses for each keyword, it will be the same throughout the document, regardless of the circumstances. If medium is the same as 2px , then a medium-width border will always be two pixels wide, whether the border surrounds an H1 or a P element. Figure 7-36 illustrates one way to handle these three keywords, as well as how they relate to each other and to the content they surround.

combinations as there are colors, but we can't exactly show them here -- being stuck in grayscale as we are -- however, we'll try to give you some idea of what you can do. Here are a few ideas to get you started.

This is a simple style sheet, as shown in Figure 6-19:

BODY {color: rgb(0%,50%,0%); background-color: #CCFFCC;}
H1, H2 {color: yellow; background-color: rgb(0,51,0);}

Figure 6-19. The results of a simple style sheet