home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Book HomeWeb Design in a NutshellSearch this book

17.8. Style Sheet Tips and Tricks

The following Cascading Style Sheet tips and tricks are courtesy of Eric Meyer (author of O'Reilly's Cascading Style Sheets: The Definitive Guide).

17.8.2. Specifying Text Size in Pixels

One of the great frustrations in designing web pages is that fonts are rendered so differently from platform to platform, especially with regard to point size. The same point size will be rendered much larger on a PC than on a Mac, making it difficult to anticipate how much type will fit on the page. (See "Why Specifying Type is Problematic" in Chapter 3, "Web Design Principles for Print Designers".)

Style sheets introduce the ability to specify type size in pixels. This translates better across platforms because the size of the type stays fixed in relation to the other elements (like graphics) on the page. The result is more predictable page layouts.

Most web developers discourage specifying text in pixels because it is not a flexible system. Pixel-sized text will be of different physical sizes on different monitors and under different resolutions. In very high-resolution environments, small pixel measurements (such as 10 pixels) might be unreadable. In general, relative measurements (em, %, x-large, larger, etc.) are a more Web-friendly way to go.

17.8.4. Table Troubles in Older Browsers

According to proper style sheet behavior, styles set for the <body> element should be inherited by all the elements on the page. Unfortunately, Navigator 4.x and Internet Explorer 4 and 5 have problems properly inheriting font and color styles (among others) into tables. To set global styles for a document that contains tables, explicitly list table elements in the selector for the page as follows:

BODY, TD, TH {font-family: georgia; color: blue;}

This problem has been fixed in standards-compliant versions of each browser (Netscape 6 and Internet Explorer 5.5+).

17.8.6. Beware Box Properties in Navigator 4.x

Some box properties are problematic for Navigator 4.x. For instance, applying borders, padding, or margins to inline elements can trip terrible bugs. Applying them in table cells can trigger browser crashes. It is best to avoid these features or put them in a separate style sheet that can be selectively not served to Navigator 4.x browsers (via browser-detect scripts or by adding it via @import, which is not supported by Netscape 4).

Library Navigation Links

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