Design incompatible entre IE et Network

Bonjour,

J'ai vu plusieurs problèmes similaires mais ça n'a pas résolu mon problème.
Ce qui ce passe, c'est que mon site fonctionne super bien sur IE mais sur Firefox rien a faire le design est découpé.

A regarder sous Firefox pour voir le soucis : http://www.diagon-alley.org/

Mon code de la page d'index est divisé en deux. Voici la première partie suivi du code CSS.

[code]

-<style type="text/css">
<!--
body {
background-color: #0c0802;
}
-->
</style><title>Diagon Alley</title><table width="987" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td colspan="3" height="309"><div align="center"><img src="../interface/header.jpg" width="987" height="309"></div></td>
</tr>

<tr>
<td colspan="3" height="71"><div align="center"><img src="../interface/headmenu.jpg" width="987" height="71" border="0" usemap="#Map"></div></td>
</tr>

<tr>
<td width="210" valign="top"><div align="center">
<table width="210" border="0" cellspacing="0" cellpadding="0">

<tr>
<td><img src="../interface/actu.jpg" width="210" height="82"></td>
</tr>

<tr>
<td background="../interface/fdgauche.jpg"><div align="center">
<a href="../actu/news_gen.php">Général<a><br>
<a href="../actu/news_par.php">Parc Orlando<a><br>
<a href="../actu/news_act.php">Acteurs<a><br>
</div></td>
</tr>

<tr>
<td><div align="center"><img src="../interface/litterature.jpg" width="210" height="183"></div></td>
</tr>

<tr>
<td background="../interface/fdgauche.jpg"><div align="center">
<a href="../litte/tom_1.php">Tome 1<a><br>
<a href="../litte/tom_2.php">Tome 2<a><br>
<a href="../litte/tom_3.php">Tome 3<a><br>
<a href="../litte/tom_4.php">Tome 4<a><br>
<a href="../litte/tom_5.php">Tome 5<a><br>
<a href="../litte/tom_6.php">Tome 6<a><br>
<a href="../litte/tom_7.php">Tome 7<a><br>
</div></td>
</tr>

<tr>
<td><div align="center"><img src="../interface/autres.jpg" width="210" height="169"></div></td>
</tr>

<tr>
<td background="../interface/fdautres.jpg"><div align="center">
<a href="../autre/ani_fan.php">Les animaux fantastiques<a><br>
<a href="../autre/quidd_age.php">Le quidditch à travers les âges<a><br>
</div></td>
</tr>

<tr>
<td><div align="center"><img src="../interface/films.jpg" width="210" height="155"></div></td>
</tr>

<tr>
<td background="../interface/fdfilms.jpg"><div align="center">
<a href="../film/eds.php">L'Ecole des Sorciers<a><br>
<a href="../film/cds.php">La Chambre des Secrets<a><br>
<a href="../film/pda.php">Le Prisonnier d'Azkaban<a><br>
<a href="../film/cdf.php">La Coupe de Feu<a><br>
<a href="../film/odp.php">L'Ordre du Phénix<a><br>
<a href="../film/pdsm.php">Le Prince de Sang-Mêlé<a><br>
<a href="../film/rdlm.php">Les Reliques de la Mort<a><br>
</div></td>
</tr>

<tr>
<td><div align="center"><img src="../interface/basgauche.jpg" width="210" height="34"></div></td>
</tr>

</table>
</div></td>
<td width="560" valign="top" background="../interface/centreml.jpg"><div align="center"></div> <div align="center">
<table width="560" height="172" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="172" background="../interface/centreht.jpg" > </td>
</tr>

/code


CSS :

[code]

a:link {
color: #000000;
text-decoration: none;
}

a:visited {
color: #dcd0a7;
text-decoration: none;
}

a:hover {
color: #dcd0a7;
text-decoration: none;
}

a:active {
color: #000000;
text-decoration: none;
}
h3 /*pour tout les titres h3*/
{
color: #dcd0a7;
text-align: center;
font-family: Bradley Hand ITC, Arial, Times, Serif;
font-size: 22px;
text-decoration: underline;
}

h6 /*pour tout les titres h6*/
{
color: #000000;
text-align: right;
font-family: Arial, Times, Serif;
font-size: x-small;
padding-right: 100px;
}

p
{
text-align: center;
font-family: Arial, Times, Serif;
font-size: 13px;
color:#000000;
text-decoration: none;
padding-right: 35px;
padding-left: 35px;
}

/code

J'eszpère que vous pourrez m'aider car j'en suis que au début de ma formation de webmaster et je ne comprends pas toutes mes erreurs et la ça va faire trois jours que je cherche partout sans résultat.

Merci d'avance.