Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 19th of June 2013 01:59:26 PM

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 of other elements, nor does their content flow around the positioned element. This implies that an absolutely positioned element may overlap other elements, or be overlapped by them. (We'll see how 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 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:

border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style


Library Navigation Links

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

Example

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

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

Example

UL {padding-bottom: 0.5in;}
padding-leftIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This property sets the size of the leftpadding of an element, and this padding will "inherit"

Figure 7-20 illustrates the consequences of such arule, where the amount by which paragraphs overlap each other andspill beyond the browser window is entirely dependent on the width ofthe window itself -- and the wider the window, the worse thesituation becomes.

Figure 7-20

Figure 7-20. The dangers of document-wide negative-margin rules

Using negative margins with block-level elementssuch as these can quite obviously be dangerous and is rarely worth