CSS Tip:
Netscape And Empty Table Cells

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

Netscape browsers have a well-known bug: they don't display empty table cells. It's really annoying to have to add a bunch of code to your table just to get empty cells to display background colors. It's even worse when that HTML code breaks your careful table layout. Use this simple CSS specification to tame your empty table cells in Netscape.

HTML Solutions Give Inconsistent Results

We're going to use a simple example where you use colored table cells to create a border around a table. You can do that very easily using COLSPAN and ROWSPAN attributes, but those alone don't let you reliably control the cell size. We're using a border because it's really easy to see how changes affect the empty cells. You can see the problem and solution without getting bogged down in complex table code.

Let's assume you want the outside cells to be 5 pixels high. So you set the width of the vertical sides to width="5" and set the font size of the top and bottom rows to 5 pixels. But when you insert a nonbreaking space so Netscape will display the cells, the top and bottom borders are way too tall. Those nonbreaking spaces add more vertical space than you anticipate.

This is also a problem in Explorer. Here's how the table looks in Explorer 5.5 and Netscape 6.0:

Not only does it look bad, but the discrepancy may cause your table cells to line up incorrectly with other page elements.

Next, you create a GIF image that is 5 pixels high and the same color as the border and place an IMG tag in each of the top and bottom border cells. That gets the height correct and it was easy to do in this table because we're dealing with just a few cells. But in a large, complex table, all this extra code causes maintenance problems and bloats the page size.

Both options add extra HTML code to your table. That increases page load time and greatly increases the possibility of HTML coding errors that may break your page layout.

Cell Control With CSS

Now, you could create this border using the BORDER property as discussed in our March 2002 newsletter story. Remember though, as we said in that story, older Netscape browsers don't fully support the BORDER style attribute.

Use this STYLE specification to get borders that even behave in old Netscape browsers.

In this style specification, we're setting the style specifications for the entire document and then creating a special class to handle the border. We had to add TABLE, TR, and TD to the BODY style specification because of Netscape's incomplete support for CSS in tables.

The class we set up is called "emptyCell." In it, we define the font-size to be the height we want for the border cells and define the cell background color.

Like this:

Here's how your simple table displays when we use the "emptyCell" class to create the border. You get the same effect as using images, but without the extra effort.

Netscape's handling of empty table cells has given web designers fits for years, but it's just one browser display problem that Web designers have to deal with. Read about other Netscape/CSS quirks in our newsletter story "Netscape Ate My Stylesheets!"

And easily find out if you have any cross-browser display problems with NetMechanic's Browser Photo tool. Browser Photo shows you actual screen shots of your Web page in 14 different browser and operating system combinations. It's the easy way to find errors before your visitors do.