Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 21st of October 2014 12:47:49 AM

10.3. Fonts and Text

The font property has also picked up a few new values in CSS2:

caption
icon
menu
message-box
small-caption
status-bar 

These values give the font property the ability to match the font family, size, weight, and so forth, according to the settings users have specified on their computers. For example, icons on a Macintosh are typically labeled using 9-point Geneva. Assuming

font-style

Values

italic | oblique |normal

that hasn't been changed by the user, any font declaration with a value of icon will result in 9-point Geneva for that text -- as long as the page is viewed using a Macintosh:

SPAN.OScap {font: icon;}  /* will look like icon labels in OS */

On a Windows system, of course, the font would come out different, and under other window managers (like X), it would look different still. The flexibility is certainly interesting, and it allows the author to easily create pages that have an appearance familiar to the user.



Library Navigation Links

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

A:link {border: 5px solid blue;}
P {font-size: 14px; line-height: 24px;}

Because there is extra space added above and below each line, the border around the hyperlink doesn't impinge on any other line, as we can see in Figure 8-63.

Figure 8-63

Figure 8-63. Increasing line-height to leave room for inline borders

This approach works in this particular case, of course, because all of the text is the same size. Just to cover all the bases, though, it properties always equals the width of the parentelement. At first glance, this can be interpreted to mean that anelement can never be wider than its parent's contentarea -- and as long as all properties are zero or greater,that's quite true. However, consider the following, depicted inFigure 8-19:

DIV {width: 400px; border: 3px solid black}P.wide {margin-left: 10px; width: auto; margin-right: -50px;border: 1px solid gray;}
elements. In that case, we need to use the child selector:

This translates as, "any paragraph that is a first child, andis a child of a DIV, should be in italics."If we were to leave out the child selector as follows, though:

then the rule would read, "any paragraph that is a first childof any element, and is also a descendant of a DIV,should be in italics." The difference is subtle, but real.

Figure 6-17

Figure 6-17. Navigator's incorrect behavior

Let me reiterate: this is totally wrong. However, there is a way around it, which is to set a border on the element. You can do this by setting the border the same color as the background color of your document:

BODY {background: silver;}
P {background-color: gray; padding: 1px; border: 0.1px solid gray;}

It is necessary to set a border-style for this technique to work. Whether you use that specific property, or simply