Gap appearing between table cells in NN

Trying to get a banner of cells to stretch to 100% width

[SilverElise]

I'm trying to make a banner across the top of my website which takes up all of the page width. The banner is a one row three column table; the first two cells contain gifs for the site logo, the right cell contains a table holding a search form. The penultimate cell on the inner table on the right hand side is set to width="100%" in order to take up any remaining horizontal space and thus make the entire banner fill the page width.

The problem is it looks fine in IE, but in NN a small gap appears between the two table cells in the top level table.

Here is the HTML:

<TABLE cellpadding="0" cellspacing="0" border="0">
<TR>
<TD colspan="3"><FORM></TD>
</TR>
<TR>
<TD align="left" valign="bottom"><IMG src="sitelogo.gif" width="380" height="49" border="0"></TD>
<TD align="left" valign="bottom"><IMG src="Search.gif" width="91" height="49" alt=""></TD>
<TD align="left" valign="bottom" width="100%">
<TABLE cellpadding="0" cellspacing="0" border="0">
<TR>
<TD align="left" valign="bottom" colspan="4"><IMG src="Spacer-Black.gif" width="100%" height="1" alt=""></TD>
</TR>
<TR>
<TD align="left" valign="middle" class="goldbackground"><INPUT name="keywords" type="text" size="25" style="width: 209px;"></TD>
<TD align="left" valign="top" class="goldbackground"><BUTTON name="submit" value="submit" type="submit" class="goldbackground" style="height:36px; width:34px; border:0;"><IMG src="GOButton.gif" width="34" height="34" alt="Go!"></BUTTON></TD>
<TD align="left" valign="middle" width="100%" class="goldbackground"><IMG src="Spacer-Gold.gif" width="100%" height="1" alt=""></TD>
<TD align="right" valign="top" class="goldbackground"><IMG src="Spacer-Black.gif" width="1" height="36" alt=""></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD align="left" valign="top" colspan="3"><IMG src="Spacer-Black.gif" width="100%" height="1" alt=""></TD>
</TR>
<TR>
<TD colspan="3"></FORM></TD>
</TR>
</TABLE>

Any advice to get rid of the gap or rejig this HTML much appreciated. Thanks.

[tedster]

Welcome to the forums, SilverElise.

I think the first thing to fix is the Form tag. If a Form tag begins within a table cell, it must end within that same table cell for the code to be valid.

Explorer often forgives invalid code and renders it's "best guess" - which is often just what you intended. Netscape is much more demanding, and you can consider that a blessing. So are the search engine spiders!

[BlobFisk]

Putting the form around the table itself may do it... but I've noticed that NN likes to insert a little bit of whitespace wherever it sees a <form> tag and (correct me if I'm wrong)also where it sees a hidden tag. So watch out for that....

As Tedster says, IE is far more forgiving than NN4, which tends to be the acid test of code and design. "If it works in Netscape, 90-odd% of the time it'll be ok in IE."

[T Suresh Babu]

It is a general problem in NS4x when we are using the form tags inside table tags. It introduces a space inside tables or rows etc..

The best solution is enclosing the table inside the form tags.

[SilverElise]

Hi guys thanks for all the replies. Had I have remembered my password at work today I could have replied to you in turn so please excuse me doing it all at once!

tedster - thanks for the info about the form tag. I put it into its own cell as that was a tip I picked up from other threads as a fix for the "big vertical space after a form" bug that NN seems to suffer with. In my haste I didnt run it by the validator so I didnt realise it wasnt valid HTML. So I will have to think of another approach.

BlobFisk/T_Suresh_Babu - thanks for the advice much appreciated. The problem I will have by enclosing the table inside the form is that this table is just the banner which will be included (via SSI) in every webpage. So there will be a huge vertical gap between the banner and the page body if I do it this way. Also the page body might contain a form itself - what happens then?!?!?!

Anyway I think the form issue might be misleading us here - if you remove it, the horizontal gap between the 2nd and 3rd cells of the top level table still exists. It vanishes/reappears as you resize the browser window. Any further suggestions?