Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 04th of December 2016 04:51:46 AM

10.6. Borders

In CSS1, there are quite a few properties devoted to setting borders around element boxes, such as


There is one drawback to this strategy. A few versions of olderbrowsers, such as very early versions of Netscape Navigator and NCSAMosaic, had some trouble with comments. The problems ranged frommangled display to browser crashes. This happened with only a veryfew browser versions, and it's safe to say that very few ofthese browsers are still being operated. Be aware that there are somepeople out there using these particular browsers, and they may wellhave major problems viewing your page if you use these comment tags. 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.


<length> | <percentage>

Initial value


in Figure 8-2.

Figure 8-2

Figure 8-2. The complete box model

In general, the width of an element is defined tobe the distance from the left inner edge to the right inner edge, andthe height is the distance from the inner top tothe inner bottom. These are both, not coincidentally, properties thatcan be applied to an element.

The various widths, heights, padding, margins, and borders all how you can affect the overlapping order at the end of the chapter.)

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

these levels built in, then the numbers are mapped directly to thepredefined levels, with 100 as the lightestvariant of the font, and 900 as the heaviest.

In fact, there is no intrinsic weight in these numbers. The CSSspecification says only that each number corresponds to a weight atleast as heavy as the number that precedes it. Thus,100, 200,300, and 400 might all map tothe same relatively lightweight variant, while 500