Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 01st of November 2014 11:44:26 AM

10.6. Borders

In CSS1, there are quite a few properties devoted to setting borders around element boxes, such as border-top-width and border-color, not to mention border itself. CSS2 adds a even more border properties, most of which are aimed at giving the author even more specific control of the borders. Before, it was difficult to set a specific color or style for a given side of the border, except through properties like border-left, and that could require more than one value. The new CSS2 properties address this, and their names are pretty self-explanatory:


Library Navigation Links

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

The animated GIF logo was created by sequencing still GIF'swith Microsoft's GIF Animator (a freebie you can pull off the web). The image is square, but the white image background blends seamlessly withthe page background. It is also possible to specify one or more colorsin a GIF's palette as transparent.  layout.

A perfect example is an unordered list, in which the list items follow one another. Assume that the following is declared for a list that contains five list items:

LI {margin-top: 10px; margin-bottom: 15px;}

Thus, each list item has a 10-pixel top margin and a 15-pixel bottom margin. However, when the list is rendered, the distance between adjacent list items is 15 pixels, not 25. This is because along thehow you can affect the overlapping order at the end of the chapter.)

Remember that the containing block of an absolutely positioned element is not necessarily its parent element. In fact, it often is not, unless the author takes steps to correct this situation. Fortunately, that's easy to do. Just pick the element that you want to use as the containing block for the absolutely positioned element, and give it a position of relative with no offsets. Thus:

Opera and IE5 for Macintosh do what authors would expect in thedisplay of the text. Other versions of Explorer take the all-capitalsroute.

Library Navigation Links you? On the other hand, if you set up these colors as an external style sheet, and then link all of your pages to the style sheet, then you only have to edit one file in order to change the text colors of every last one of your pages. Affecting borders

The value of color can also affect the borders around

IMG {vertical-align: baseline;}
<P>The image found in this paragraph <IMG SRC="dot.gif" ALT="a dot"> has its
bottom edge aligned with the baseline of the paragraph.</P>
Figure 4-31

Figure 4-31. Baseline alignment of an image Superscripting and subscripting

The declaration vertical-align: sub causes the element to be "