Gap under Form within table using IE6

[Rafe Magnuson]

Hey there.

I searched around the forums and I have found that forms in IE do indeed cause a 1px gap, but this is not the same gap problem that I'm having.

Basically, I have a table that in essence looks like this:

<table width="640" align="center">
<tr><td>
<form></form>
</td>
<td>stuff</td>
<td>stuff</td>
<td>etc</td>
</tr>
</table>

thats the basics of it which gives me a gap of about a half inch underneath the drop down list form making the entire row about and inch high. In Firefox it renders perfectly at only the height of the drop down list.

Here is the actual code:

<div align="center">
<img style="display:block;" src="ftg-header.gif">
<TABLE noborder align="center" width="640" cellpadding="0" cellspacing="0">
<TR bgcolor="#3399CC">
<TD valign=center nowrap>
<FORM method="post" action="/scripts/navigator.cgi" name="">
<SELECT name="lanier_navigator" size="1" onChange="window.open(this.options[this.selectedIndex].value,'_top')">
<OPTION value="" selected>Navigate our Site</OPTION>
<OPTION value="">------------------</OPTION>
<OPTION value="http://www.FamilyTravelGuides.com/">Home</OPTION>
<OPTION value="http://www.FamilyTravelGuides.com/articles">Read Articles</OPTION>
<OPTION value="http://www.FamilyTravelGuides.com/usa.html">Search for Lodging</OPTION>
<OPTION value="http://www.FamilyTravelGuides.com/deals/">Deals and Specials</OPTION>
<OPTION value="http://www.FamilyTravelGuides.com/food.html">Travel Food</OPTION>
<OPTION value="http://www.FamilyTravelGuides.com/tips.html">Tips Heath and Safety</OPTION>
<OPTION value="http://www.FamilyTravelGuides.com/outdoorsall.html">The Great Outdoors</OPTION>
<OPTION value="http://www.FamilyTravelGuides.com/allregions.html">Regional Travel</OPTION>
<OPTION value="http://www.FamilyTravelGuides.com/feedback/">Comments/Suggestions</OPTION>
<OPTION value="http://www.FamilyTravelGuides.com/gazette/current/">Newsletter</OPTION>
</SELECT>
</FORM></TD>
<TD valign=center nowrap>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A href="http://www.familytravelguides.com/allregions.html"><FONT color=white>Regions</FONT></A>&nbsp;</TD>
<TD valign=center nowrap>&nbsp;<A href="http://www.familytravelguides.com/usa.html"><FONT color=white>Lodging</FONT></A>&nbsp;&nbsp;</TD>
<TD valign=center nowrap><A href="http://www.familytravelguides.com/gazette/current/"><FONT color=white>Newsletter</FONT></A>&nbsp;</TD>
<TD valign=center nowrap><A href="http://www.familytravelguides.com/outdoorsall.html"><FONT color=white>Great Outdoors</FONT></A></TD>
<TD valign=center nowrap><A href="http://www.familytravelguides.com/food.html"><FONT color=white>Food</FONT></A>&nbsp;&nbsp;&nbsp;</TD>
<TD valign=center nowrap><A href="http://www.familytravelguides.com/tips.html"><FONT color=white>Travel Tips</FONT></A></TD>
</TR>
</TABLE>
</div>

and a link to the actual page to see what I mean:

http://www.familytravelguides.com/signup/ftgtest.html

...

I've been at this for two days and I cant understand why firefox renders it beautifully flushed against the image at the top and as a single row whereas IE is rendering it almost twice as high.

Any suggestions?

Rafe Magnuson

[_Aerospace_Eng_]

Put the table in the form tags rather than having the form inside of the table. Then use CSS to set the margins to 0.
<form style="margin:0;">

[Rafe Magnuson]

Holy crap! That worked!

Now how in the heck would I have found that? I googled all over the place for stuff regarding forms and what-not. Maybe I should have been looking for style elements instead?

Anyway, thanks! Fast reply and very much to the point. You rock!

Rafe