The incredible shrinking graphics...

In IE and Opera, the navigation buttons display correctly. In Firebird, they do not...they shrink to the width of the text. Any suggestions how to fix it?

The CSS (from the file) and HTML are included:

Here's the CSS:

#mainMenu {
position: absolute;
text-align: left;
width: 600px;
border: 0px none;
color: #000000;
margin: 0px;
padding: 2px;
top: 86px;
left: 145px;
z-index: 10;
}
#menuList {
margin: 0px;
padding: 0px;
border: 0px none;
display: inline;
color: #000000;
}

#menuList ul {
margin: 0px;
padding: 0px;
color: #000000;
}

#menuList li {
display:inline;
list-style: none;
text-decoration: none;
color: #000000;
}

a.starter {
color: #000000;
font-weight: normal;
font-size: 12px;
margin: 0px;
padding: 0px;
text-decoration: none;
background-image: url(../images/Button_clr.png);
text-align: center;
width: 70px;
height: 20px;
vertical-align: middle;
line-height: 18px;
background-position: 0px 0px;
background-repeat: no-repeat;

}

a.starter:visited {
color: #000000;
font-weight: normal;
font-size: 12px;
margin: 0px;
padding: 0px;
text-decoration: none;
background-image: url(../images/Button_clr.png);
text-align: center;
width: 70px;
height: 20px;
vertical-align: middle;
line-height: 18px;
background-position: 0px 0px;
background-repeat: no-repeat;

}

a.starter:hover, a.starter:active {
color: #000000;
background-image: url(../images/Button_Pushed.png);
text-align: center;
text-align: center;
width: 70px;
height: 20px;
vertical-align: middle;
line-height: 18px;
background-position: 0px 0px;
background-repeat: no-repeat;

}

.menu {
text-align: left;
color: #000000;
position: absolute;
width: 140px;
visibility: hidden;
font-size: 12px;
border: none;
height: 20px;
padding: 0px 0px 0px 5px;
vertical-align: middle;
}

.menu li a {
color: #000000;
display: block;
font-size: 12px;
line-height: 18px;
margin: 0px;
padding: 0px 0px 0px 5px;
text-decoration: none;
background-image: url(../images/Button_Menu.png);
background-repeat: no-repeat;
background-position: 0px 0px;
height: 18px;
width: 140px;
vertical-align: middle;
}

.menu li a:hover, .menu li a:active, .menu li a:visited {
color: #000000;
background-image: url(../images/Button_Menu_Hover.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding: 0px 0px 0px 5px;
height: 18px;
width: 140px;
vertical-align: middle;
}

#menu1, #menu2, #menu3, #menu4, #menu5 {
width: 140px;
z-index:100;
height: 18px;
vertical-align: middle;
padding-left: 4px;
}

HTML:

<div id="mainMenu">
<ul id="menuList">
<li>
<a href="default.htm" class="starter" accesskey="1">Home</a>
</li>
<li>
<a href="products.htm" class="starter"
accesskey="2">Products</a>
</li>
<li >
<a href="aboutus.htm" class="starter" accesskey="3">About
Us</a>
</li>
<li class="menubar">
<a href="company.htm" class="starter" accesskey="4">Company</a>
<ul id="menu4" class="menu">
<li><a href="mission.htm" title="Mission">Mission</a></li>
<li><a href="management.htm" title="Management Team">Management
Team</a></li>
<li><a href="careers.htm" title="Career Opportunities">Career
Opportunities</a></li>
</ul>
</li>
<li class="menubar">
<a href="news.htm" class="starter" accesskey="5">News</a>
<ul id="menu5" class="menu">
<li><a href="pressreleases.htm" title="Press Releases">Press
Releases</a></li>
<li><a href="events.htm" title="Events">Events</a></li>
</ul>
</li>
<li class="menubar">
<a href="contactus.htm" class="starter" accesskey="6">Contact
Us</a>
</li>
<li class="menubar">
<a href="clients.htm" class="starter" accesskey="7">Clients</a>
</li>
</ul>
</div>