Another FF vs IE issue

Table cells collapsing when an element is made to be absolutely positioned

[Greven]

The situation is that I have a navigation bar that positions and displays fine until I try to produce my hover effect. Here is the basic css:

.Tabs /* PortalTabs in Default Layout & DefaultSubTabs Layout */
{
text-align: center;
vertical-align: middle;
border-style: solid;
border-left: 0;
border-right: black 1px solid;
border-top: #94949C 3px solid;
border-bottom: #94949C 3px solid;
color: #FFF;
border-collapse: separate;
}

.DefaultTD table
{
border-collapse: collapse;
}

/* Important the order: link, visited, hover, focus, active. see [w3.org...] */

.Tabs A
{
font-weight: bold;
font-size: 12px;
padding-bottom: 2px;
line-height: normal;
font-family: Verdana, Helvetica, sans-serif;
padding-right: 3px;
padding-left: 3px;
text-align: center;
margin-right: -2px;
margin-left: 2px;
vertical-align: middle;
color: #FFF;
}

.Tabs A:link
{
color: #FFF;
text-decoration: none;
}
.Tabs A:visited
{
color: #FFF;
text-decoration: none;
}
.Tabs A:hover
{
font-weight: bold;
font-size: 12px;
line-height: normal;
padding-bottom: 2px;
font-family: Verdana, Helvetica, sans-serif;
padding-right: 3px;
padding-left: 3px;
text-align: center;
color: #000;
text-decoration: none;
background-color: #EEEFE9;
height: 36;
position: absolute;
top: 77px;
display: inline;
padding-top: 9px;
border: 0;
}

.Tabs A:focus
{
color: #FFF;
text-decoration: none;
}
.Tabs A:active
{
color: #FFF;
text-decoration: none;
}

And here is a make up of the HTML. Unfortunately this is generated content, so I can't absolutely position each table cell:

<table id="_ctl3_Banner_PortalTabs" cellspacing="0" align="Left" border="0">
<tr>
<td class="Tabs">
<a href="/SPOTv2_1/site/Spot-V2/1/Spot-V2.aspx">
Home
</a>
</td><td class="Tabs">
<a href="/SPOTv2_1/site/100/default.aspx">
Administration
</a>
</td><td class="SelectedTabs">
<a href="/SPOTv2_1/site/300/default.aspx">
Customer Service
</a>
</td><td class="Tabs">
<a href="/SPOTv2_1/site/301/default.aspx">
Technical
</a>
</td><td class="Tabs">
<a href="/SPOTv2_1/site/302/default.aspx">
Employee Info
</a>
</td><td class="Tabs">
<a href="/SPOTv2_1/site/303/default.aspx">
Departments
</a>
</td><td class="Tabs">
<a href="/SPOTv2_1/site/304/default.aspx">
Site Map
</a>
</td><td class="Tabs">
<a href="/SPOTv2_1/site/329/default.aspx">
Search
</a>
</td><td class="Tabs">
<a href="/SPOTv2_1/site/406/default.aspx">
Test
</a>
</td><td class="Tabs">
<a href="/SPOTv2_1/site/423/default.aspx">
paul test
</a>
</td>
</tr>
</table>

The issue is that when I mouseover the anchors in FF, everything to the right of the element collapse inwards because of the "empty" table cell. Any ideas?

[vincevincevince]

You'll have to use a fixed width...

[Greven]

Is that the only option? The content in the cell can change at any time and will be of varying width