Hover behavior problem in Firefox

[jkl1111]

I have created a site (

http://www.cuaerospace.com)

using Dreamweaver 8 that works great in IE7, but not so great in Firefox 2.0.0.4 or Safari 3.0.1 (beta for PCs). On the home page everything is fine in all browsers. The problem enters when I navigate to any page other than the home page using Firefox or Safari. The left anvigation buttons only show the hover behavior when the mouse is to the far left of the text (namely the first 15 pixels or so of that navigation frame). I can also only click to link on those few pixels (not the actual text). I want all of the left navigation buttons on all pages to work like those on the home page. What am I doing wrong? Any help would be appreciated.

Here is my css code:
.navigation1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
width: 110px;
display: block;
text-decoration: none;
padding: 10px;
}
.navigation1:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
display: block;
width: 110px;
background-image: url(images/left_nav_button.jpg);
padding: 10px;
}
.navigation2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
width: 110px;
display: block;
padding: 10px;
text-decoration: none;
}
.navigation2:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
display: block;
padding: 10px;
width: 110px;
background-image: url(images/left_nav_button_short.jpg);
}
.navigation3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
width: 110px;
display: block;
padding: 10px;
text-decoration: none;
}
.navigation3:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
display: block;
padding: 10px;
width: 110px;
background-image: url(images/left_nav_button_tall.jpg);
}
#leftnav {
width: 134px;
background-color: #660000;
float: left;
clear: none;
}
#leftnav_about_table {
position: relative;
top: -10px;
}


Here is my html code (

http://www.cuaerospace.com/about.html):

<div id="leftnav">
<p></p>
<p></p>
<p>
<a href="about.html" class="navigation1"><em><u>About Us</u></em></a>
</p>
<div id="about_table">
<table width="130" border="0" align="center" cellpadding="0"
cellspacing="0" id="about_table">
<tr>
<td><div align="right"><a href="vision.html"
class="navigation2">The Vision</a></div></td>
</tr>
<tr>
<td><div align="right"><a href="company.html"
class="navigation2">The Company </a></div></td>
</tr>
<tr>
<td><div align="right"><a href="partners.html"
class="navigation2">The Partners</a> </div></td>
</tr>
<tr>
<td><div align="right"><a href="engineers.html"
class="navigation3">The Engineering Team</a> </div></td>
</tr>
<tr>
<td><div align="right"><a href="laboratories.html"
class="navigation2">The Laboratories</a> </div></td>
</tr>
</table>
</div>
<p>
<a href="publications.html" class="navigation1">Publications</a>
<a href="news.html" class="navigation1">News</a>
<a href="contact.html" class="navigation1">Contact Us</a>
</p>
<p>&nbsp;</p>
<p><a href="GA_purchase.html" class="navigation3">Purchase GA Code</a>
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

Thanks!