The following is a series
of demonstrations on how tables vary in Netscape. Hey, IE has never had
trouble with tables. But Netscape is nothing but trouble for any web
designer/developer.
RULE #1.
To start, Netscape will not even display a table unless all the tags are
correct. IE is very forgiving. Netscape forgives not. So if you ever
encounter a situation where a table shows up in IE but is "gone" in
Netscape, look for missing tags or misplaced tags.
RULE #2.
Netscape doesn't like empty cells. It hates them. It ignores them and
won't even acknowledge anything to do with them. In
THIS example, there are three tables with the
center cell having either a COLOR or a BACKGROUND. View it in IE and
everything is there. View it in Netscape and you only see the center cell
on the bottom table. The first two tables' center cells have nothing in
them. The bottom one has a "space" ( ). Some developers use a clear
gif, I use speck.gif as a cell filler upper for Netscape.
A further detailed
discussion can be found here:
http://www.frontiernet.net/~willshak/nn_tables.html
Rule #3.
Nested tables are trouble for Netscape, especially if you want to have a
general table background with unique cell colors on top of that. Examples
with a code workaround is available HERE.
Rule #4.
Sizing tables and cells as you want them sized with Netscape is pretty
much impossible without using some "shim" gimmicks or naming
pixel values for each cell's width and height. Of the two methods, by far
the most reliable is the "shim" method since occasionally, Netscape
doesn't want to recognize pixel values even when named. As all carpenters
know, a "shim" is a piece of wood you use to plumb and level a door or
window frame. It is used the same way with tables when dealing with
Netscape (and even IE). I use my "speck.gif" as a general shim for tables. It is 1 pixel
by 1 pixel but you can change that to anything you need in the HTML image
attributes "width =" and "height =".
In my experience, it is
always best to size tables using pixels rather than percentages. However,
I usually use percentages when I'm nesting a simple (one or two column)
table inside another table that's been given a pixel width.
When you do use pixels
to size a table, you must make sure that every cell in that table has a
pixel width attribute, otherwise Netscape will pretty much ignore all the
sizing attributes. And your arithmetic for sizing cells in pixels has to
be absolutely correct or Netscape won't recognize them.
For instance, if your
table is 400 pixels wide and you have three columns of cells, and the
width of all three columns doesn't add to 400, you're in trouble.
This all comes into
play when you are designing tables with a lot of formatting, columns,
cells, etc. which is usually found in menu tables. Click
HERE for an example of this discussion.
Rule #5.
The biggest trick in FrontPage for exiting your cursor from a table and
creating a space above or below a table: place your cursor in the first or
last cell in a table and press Ctrl plus Enter. Out that cursor hops. I
can't tell you how many times I went into the HTML view and manually put
in a " " between tables to create a space above or below tables to
insert text, whatever. About 3 years ago, a FrontPage dabbler friend of
mine showed it to me. One of the most useful tips in FrontPage I've ever
come across.
Rule #6.
Try not to use borders on tables because they render so differently in
each browser. Instead, I usually set the cell spacing at "1" and color all
the cells. This creates a clean line the same color as the page or table
background and looks exactly the same in both browsers:
This:
date |
time |
event |
fee |
total |
versus this:
date |
time |
event |
fee |
total |
The menu header at the
top of this page and at the bottom is an example of using the cell spacing
to define a "border" between cells. Borders can also sometimes make it
more difficult to read column items even though they are a more dramatic
and even 3 dimensional rendering. But most people would agree that the top
gray cell table is easier to read than the bottom gray bordered table.
Rule #7.
Netscape doesn't like one cell to span too many others. Why? It would be
easier to figure out the Florida election last fall. Therefore, it is far
better to break cells down into "stacked" tables than to create one big
table with a variety of sized and spanned cells. This becomes especially
true when you are designing some table that is a big component of a
design, like the horizontal menus on this page. For an example of what we
are talking about, click HERE.
Rule #8.
IE isn't perfect when it comes to tables either. Sometimes it demands that
you specify pixel dimensions for everything IF you want it to recognize
certain elements in a highly formatted table, like an image. What? See the
example HERE for a demonstration.
|