Your table looks perfect in one browser and like a dropped tray of silverware in the other. Don't panic. It's nearly always one of these eight, and I've done every one of them myself.

1. "Netscape shows a blank page."
You left off a </table>, or a </td> or </tr> somewhere in a nested table. Internet Explorer quietly fills in what's missing and carries on. Netscape won't draw a table until it has seen the end of it, so if the end never comes, neither does anything inside. Count your opening and closing tags. I print the page out and tick them off with a pencil, the way I check a drawing.

2. "My menu is floating in the middle of nowhere."
valign="top" on the cell. Page 1 explains why. I'll keep saying it.

3. "My colored cells come out white in Netscape."
An empty cell in Netscape gets no background color and no border. It's drawn as if it weren't there. Put a non-breaking space, &nbsp;, in any cell that has nothing else in it:

4. "There are thin gaps between my pictures."
If you've cut one big picture into pieces and fit them back together in a table, any space or line break between the <img> tag and the </td> turns into a thin white stripe. Put the closing tag right up against the picture:

Set border="0", cellpadding="0" and cellspacing="0" on that table too, and border="0" on any picture that's also a link, or you get a blue box around it.

5. "My font goes back to plain Times inside the table."
Netscape doesn't carry a <font> tag from outside a table into the cells. You need a font tag inside every cell. Yes, every one. That's why pages like this one are wall-to-wall font tags. It's not pretty, but it's the price of looking the same in both browsers.

6. "My table's background picture starts over in every cell."
Netscape 4 takes a background set on the <table> tag and repeats it separately inside each cell, so a pattern that should flow across the whole table starts over at the corner of every cell. IE does it the way you meant. If it matters, put the picture on the <body> instead, or use a plain bgcolor on the table.

7. "My widths don't do anything."
Widths are requests, not orders. A picture or a long word that won't fit pushes its cell wider no matter what you asked for, and if your percentages add up to more than 100, each browser makes its own guess about what you meant, and they don't guess alike. Make them add up. Remember that padding and borders take up room too.

8. "My page takes forever to show up."
Browsers, Netscape especially, want the whole table before they'll draw any of it, so they can work out the column widths. If your entire page is one big table, your visitor stares at a blank gray window until the very last byte comes down the modem. Break the page into several tables stacked one after another, the way this site is, and the top shows up while the rest loads. And put width and height on every picture, so the browser can lay the table out before the pictures arrive.

My testing routine

Before anything goes up, I do this, every time:

1. Look at it in Netscape and IE. I keep both on my computer for this and nothing else. (Mostly.)
2. Drag the window down to about 640 wide and see what breaks.
3. Change every border="0" to border="1" and look again. Whatever's wrong, you can see it now.
4. Change them all back.

Forgetting step 4 is how my research group's page spent a week on the Web with beveled borders around every single thing on it. Nobody said a word. Engineers.

From the mailbag

Still stuck? E-mail me the address of your page and tell me which browser it breaks in. Don't attach the file; I'll just View Source. I answer on weekends.

« Back to 1. The Basics