The gap is because your elements are all freely stacking on each other in the page - they are not positioned or confined within divs (or in your case, tables) so they are just falling into the available space in whatever order they appear in the markup. The menu has no background colour, but it does have height so its occupying space, and it is that which is causing the black bar.
Maintaining your use of tables (and to avoid confusing you with divs while you're learning), I'd suggest containing all of your elements in one large outer table to give it better overall structure. Something like...
Note the additional changes in red - setting the cell background which contains the menu to white and also setting the z-index on the menu to a higher number to make sure it lays on top of everything else.
<table width="960" border="0" cellspacing="0" cellpadding="0" align="center">
<td><img src="images/PayItForward.png" width="398" height="99"></td>
<ul id="gooeymenu1" class="gelbuttonmenu" style="z-index:100">
<li><a href="#">Pay It Forward</a></li>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Contact Us</a></li>
<td height="600" align="center" valign="top" bgcolor="#FFFFFF"><img src="images/line.png" width="827" height="5" align="texttop"></td>
<td height="95" background="images/Footer_Bkgd.gif"> </td>
You can move that to the CSS - I just put it all in the HTML markup so you could see how it applies.
Also, don't forget to close your tags (I added the closing </table> tag to tie things up)