I have an issue that even though is probably posted a lot, Im assuming they are different in their own ways.

So my issue is that on this page the images are spaced out really far apart.

http://point-of-orange.com/designs/oly/index2.htm

Can anyone explain why there is so much space under the logo like that?

In Firefox you can see the space.

IE looks fine.

You could try adding valign="top" in the table cell that the navigation table goes inside of, like this::
...
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="795">
<tr>
<td width="21"><img name="index2_r4_c1" src="images/index2_r4_c1.jpg" width="21" height="272" border="0" alt=""></td>
<td valign="top" width="185"><table align="left" border="0" cellpadding="0" cellspacing="0" width="185">
<tr>
<td><img name="index2_r4_c2" src="images/index2_r4_c2.jpg" width="185" height="9" border="0" alt=""></td>
</tr>
<tr>
<td><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('index2_r5_c2','','images/index2_r5_c2_f2.jpg',1);"><img name="index2_r5_c2" src="images/index2_r5_c2.jpg" width="185" height="13" border="0" alt=""></a></td>
</tr>
...