[thelist] Re: Basic tables in IE/Navigator

Lenore Snell lenore at bab5.org
Sat Oct 5 15:48:01 CDT 2002

> On Sat, Oct 05, 2002 at 09:51:41PM +0800, Grace Teng wrote:
>> In IE, you can use valign or topmargin to force information to the top
>> of a
>> table cell, right? However, in Navigator, the information remains
>> centered
>> in the cell.
> I've never heard of a topmargin attribute for table data cells, perhaps
> it is
> it Microsoft extendorubbish.

This is used for the body tag -
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  

leftmargin and topmargin are used for one browser and marginwidth and
marginheight for the other


Forcing information to the top of a table cell - valign works fine in
<td valign="top">somedata</td>

Be careful with putting it on the <tr> tag - like the commonly used <tr
background="pattern.gif">data</tr> doesn't work with all versions of IE

If you're using tables and you've done the valign and you've done the
<td> and not the <tr>, then it's usually one of the following:

1. Make sure you don't have a <p> or <br> tag like this:
<td valign="top"><p>someday</p></td>
Or you have to delete that

2. Check the rest of your table code - valign may not be the problem. A
common mistake is to not have the math across the columns/row calculated
correctly, shifting content

> Netscape Navigator has supported the valign attribte for table data
> cells for
> a long time. It is certainly supported in the 4.x series and the 6+
> series,
> some earlier versions probably support it, but I don't have access to
> them
> to check.

Earlier versions of Netscape also supported it.
> If it isn't working then the odds are strongly in favour of there being
> another error in your code which IE's error correction handles as you
> want
> but NN's error correct treats differently. Try checking the code using
> http://validator.w3.org/

Agreed. Exploder tends to favor  more incorrect code than Netscape from
my experience.  It *could* be something else in the code - the table
falls apart but isn't necessarily related to the table alignment.

Are you using an editor? Make sure you select inside the cell and do
valign=top - not just selecting on the image or other content. I tend to
hard code but be careful of the interface of the editors and check the
source code to be sure you're doing what you're thinking you're doing.
Another good check is to turn the borders on your table and make sure
it's clean lines - if not, you have a table problem to address before
you think about content alignment

Do you have cellpadding/cellspacing turned on?

>> Here's the scenario. There's a table, two by two. In the top-left cell
>> there
>> s a logo, in the top right there's the page banner, in the bottom left
>> cell
>> there's the navigation and in the bottom right, there's content. This
>> is
>> quite a common layout or concept.

Very quick idea (not exact code details) of what you should have -

<table border="0" cellpadding="0" cellpadding="0">
<td><img src="logo.gif"></td>
<td><img src="banner.gif"></td>
<td valign="top">navigation</td>
<td valign="top">content</td>

Hope this helps! If you want, you can send me the source code directly,
and I could tell you more specific to your file although it's probably
one of the above problems.

Lenore Snell

More information about the thelist mailing list