Need help closing the gap between main page & header

I have a web page that has a gap between the main content page (lower) and the header piece(upper) and I can't figure out how to close this gap. If you're interested in taking a look at it. Here's the code and I've attached an image for a visual aid.
Thanks.

<table width='770' border='0' cellpadding='0' cellspacing='0' id='maintable' align='center' table valign='top' align='left' cellpadding='0' width='770' height='500' table style='background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; width:'770' height:'500'></td>
<link href='custom.css' rel='stylesheet' type='text/css'>

<td id='menu' align='left' valign='top' rowspan='500' width='165'>
<br>&nbsp;&nbsp;&nbsp;&nbsp;<img src='images/bullet.gif' alt='' width='10' height='10'><a href='index.php'><font color='#DDCEA2'><font face='Arial' size='2'>Home</a></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;<img src='images/bullet.gif' alt='' width='10' height='10'><A href='index.php?command=signup_page'><font color='DDCEA2'><font face='Arial' size='2'>Sign Up</font></A>
  <br>
&nbsp;&nbsp;&nbsp;&nbsp;<img src='images/bullet.gif' alt='' width='10' height='10'><a href='faq.html'><font color='DDCEA2'><font face='Arial' size='2'>FAQ</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;<img src='images/bullet.gif' alt='' width='10' height='10'><a href='legal.html'><font color='DDCEA2'><font face='Arial' size='2'>Terms of Use<br></a>

<form method='POST' action='index.php'>
<input class='field' type='hidden' name='command' value='account'>
<input class='field' type='hidden' name='param' value='signup'>
</form>

<tr><td>&nbsp;</td></tr>

<td valign=top colspan='2' class='pageTitle'><div class='hLine'><b>&nbsp;&nbsp;&nbsp;&nbsp;<font face='Arial' color='#EE7600' size='3'>Select The Payment Button Below To Continue</b></font></div></td></tr>
 <td class='fieldLabel' width='30%'>&nbsp;&nbsp;&nbsp;&nbsp;<font face='Arial' color='#A30100' size='2'><b>Transaction Type:</b></font></td>

<td align='left' class='text' ><b>[account_type_title]</b></td>
 </tr>
 <tr>
  <td class='fieldLabel' width='30%'>&nbsp;&nbsp;&nbsp;&nbsp;<font face='Arial' color='#A30100' size='2'><b>Price:</b></font></td>
  <td align='left'  class='text' ><b>$&nbsp;[price]</b></td>
 </tr>
 <tr>
  <td class='fieldLabel' width='30%'>&nbsp;&nbsp;&nbsp;&nbsp;<font face='Arial' color='#A30100' size='2'><b>Subscription Period:</b></font></td>
  <td align='left'  class='text' ><b><font face='Arial' color='#000000' size='2'>[period]</b> (month)</font></td></tr>
 <tr valign='top' height='55px' '>
    <td valign='top' class='fieldLabel' width='30%'>&nbsp;</td>
    <td valign='top'>&nbsp;<p><font face='Arial' color='#000000' size='2'>[payment_code]</font></p></td>
 </tr>
<tr><td>&nbsp;</td></tr><tr><font face='Arial' color='#000000' size='2'></font>
 <tr height='30%' ><td colspan='2'><div class='hLine'>&nbsp;</div></td></tr>
</table

Code (markup):

 

Hello,

The gap between header and main content is coming because of the form tag used in header.txt

<FORM name='search' action='index.php' method="POST">

Code (markup):

If you comment out the tag, the gap disappears. from code of header.txt, i dont think there is any need of creating form field there.

Hope this helps you.

Regards,

 

Thanks for your reply.

Even with your suggestion, the gap remains.

Any other thoughts?

 

I'm not expert but I recently had a similar problem and I edited the CSS for the top div with padding-bottom using firebug until it appeared as I wanted.

 

There are lots of problems with the code, why have you used ' instead of " which is common accepted practice.

If you want the problem solved please provide an uploaded working version.

 

Thanks for your replies.

I'm sure they are both helpful replies, but I don't know what they mean.

I don't know what this sentence means "why have you used ' instead of " which is common accepted practice".

And I don't know what this means: "I edited the CSS for the top div with padding-bottom using firebug".

Clarification would be appreciated. Thanks.