CSS Tip:
Cover Your Tables With Style Sheets

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Cascading Style Sheets (CSS) were supposed to make layout with tables obsolete. But because of browser incompatibility problems, most Web designers still use tables instead of style sheets to control layout. This means that style sheets and tables coexist on the same Web sites. That mixture leads to unexpected problems in some browsers.

CSS And Inheritance

Mention inheritance to the average person and they're likely to think of a rich uncle who might just leave them his fortune. With style sheets though, inheritance is something completely different. It refers to the ability of one property to inherit the properties of an enclosing tag.

For example, suppose you have the following style sheet declaration on your Web page:

<STYLE>
BODY {font-family:verdana; color:blue}
</STYLE>

In this declaration, you're setting all the text on the page to display in blue Verdana font. All the page elements inside the BODY tag should have those characteristics - paragraphs, lists, headers, etc.

Style sheets greatly simplify coding because you don't have to keep repeating the FONT tag for every page element: one declaration does it all.

Netscape And Tables

Doesn't that sound too good to be true? Well it is. Tables and CSS declarations don't play well together on the same page in some Netscape versions. Although TABLE tags are always inside the BODY tag, Netscape 4.x browser versions don't apply the BODY style declarations inside tables.

CSS authors who spend hours defining styles and applying them to their Web pages often find that little - if any - of their intended formatting displays in Netscape. That's because most Web designers still use tables to control page layout. On some Web pages, every bit of page content is inside a table.

Look at how Explorer 5.0 and Netscape 4.7 display the same page with the style attributes from the previous section. We noted the tags so you can see how each browser applies the styles:

The header and paragraph tags inherit the formatting from the BODY tag in both browsers. But look at the table content in Netscape: instead of green Verdana text, it's black Times Roman (Netscape's default text and color).

Be Specific For Netscape

This can seriously frustrate Web developers who are just beginning to use style sheets, but it's easy to fix. When you set your style properties for the BODY of the document, include TR and TD in that declaration like this:

<STYLE>
BODY, TR, TD {font-family:verdana; color:blue}
</STYLE>

Although technically you shouldn't have to specify style attributes for your tables, adding them solves the Netscape 4.x display problem.

For more discussion of style sheets in general, refer to our July 2000 newsletter article.

CSS were supposed to help solve display problems, but it doesn't always work that way. There are other browser display issues to consider too: sometimes certain HTML tags, tag placement, or simple coding errors can break your page in one browser but display perfectly in another.

Quickly find problems that affect your page display with NetMechanic's Browser Photo tool. Browser Photo will show you how your page displays in 14 different browser and operating system combinations. It gives you the resources of a complete testing lab without the expense.