hi, i have a problem with table layout.

this is my html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<HTML>
<HEAD>
<LINK href="Styles.css" type="text/css" rel="stylesheet" />
</HEAD>
<body>
<form id="frmForm">
<table class="tabellaLayout">
<tr class="header">
<td colSpan="3">Header</td>
</tr>
<tr class="primaFascia">
<td class="cellaNavigatore">Navigator</td>
<td class="cellaContenuti" rowSpan="2">Content</td>
</tr>
<tr class="secondaFascia">
<td class="cellaMeteo">Weather</td>
</tr>
<tr class="footer">
<td colSpan="3">Footer</td>
</tr>
</table>
</form>
</body>
</HTML>

and this is my css:

html,body
{
padding:0px;
margin:0px;
}
td
{
border-width: 1px;
border-style: solid;
border-color:Black;
}

.tabellaLayout
{
width: 800px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-top:-300px;
margin-left:-400px;
margin-right:0px;
margin-bottom:0px;
}

.header
{
height: 20%;
}

.primaFascia
{
height: 50%;
}

.secondaFascia
{
height: 25%;
}

.footer
{
height: auto;
}

.cellaNavigatore
{
width: 20%;
}

.cellaMeteo
{
width: 20%;
}

.cellaContenuti
{
width: 80%;
padding-left: 30px;
padding-top: 10px;
line-height: 15px;
vertical-align:top;
}

the problem is that in FireFox the layout appears decentrated...Someone could help me?