[HTML] Problema allineamento DIV

[MaRgEnIuS]

Salve a tutti... Sono un aspirante webmaster che sta tentando da un paio di giorni di risolvere alcuni problemi legati al posizionamento di alcuni DIV all'interno del sito che sto preparando. Il mio obiettvo è quello di centrare tutta la pagina in entrambi i browsers (Internet Explorer e Firefox). Sono riuscito attualmente a centrare il tutto con Internet Explorer..., ma purtroppo ho grossi problemi con Firefox... Posto qui sotto le pagine HTML e CSS per rendere l'idea del progetto... Se qualcuno mi potesse dare dei suggerimenti su come potere risolvere questo grande problema mi farebbe un grande favore!!!

Parte HTML:

<html>
<head>
<title>GOSIA ANDRZEJEWICZ ITALIA</title>
<meta name="description" content="">
<meta name="keywords" content="">

<!-- INIZIO SCRIPT IN JAVASCRIPT -->

<script type="text/javascript">

if(document.all)
{
//Explorer
document.write("<link rel='stylesheet' href='css/GalleriaIE.css' type='text/css'>");
}
else if(document.getElementById)
{
//Netscape 6
document.write("<link rel='stylesheet' href='GalleriaMF.css' type='text/css'>");
}


</script>


<!-- FINE SCRIPT IN JAVASCRIPT -->

</head>
<body>

<!-- DIV CORPO CENTRALE -->

<div id="container">

<!-- DIV INTESTAZIONE -->

<div id="header">
<p>GALLERIA</p>
<a href="Biografia.html" title="Vai a BIOGRAFIA"><img src="css/Skins/frecciasx.gif" alt="Vai a BIOGRAFIA"></a>
&nbsp
<img src="css/Skins/banner2.png" alt="Gosia Andrzejewicz">
&nbsp
<a href="Testi.html" title="Vai a TESTI"><img src="css/Skins/frecciadx.gif" alt="Vai a TESTI"></a>
</div>
<p class="presentazione">CLICCA SUL LINK CHE TI INTERESSA PER VISUALIZZARE LE FOTO</p>
<p>SEZIONE AGGIORNATA AL 10 AGOSTO 2009</p>

<!-- APERTURA DIV CONTENENTE LE SEZIONI FOTOGRAFICHE -->

<div id="gallery">

<!-- DIV CONTENENTE LA SEZIONE 'ALBUM' -->

<div id="album">
<fieldset>
<legend>ALBUM</legend>
<a href="Gosia_Andrzejewicz_Plus.html" class="sxdx">Gosia Andrzejewicz Plus</a><br>
<a href="PSL.html" class="sxdx">Pozwól żyć</a><br>
<a href="PSL.html" class="sxdx">Słowa</a><br>
<a href="PSL.html" class="sxdx">Lustro</a><br>
<a href="Otworz_Oczy.html" class="sxdx">Otwórz Oczy</a><br>
</fieldset>
</div>

<!-- DIV CONTENENTE LA SEZIONE 'EVENTI' -->

<div id="eventi">
<fieldset>
<legend>EVENTI</legend>
<a href="Klimat.html" class="sxdx">KLIMAT - 25.03.07</a><br>
<a href="Gosia_za_kierownica.html" class="sxdx">Gosia za kierownicą!</a><br>
<a href="Walentynki_i_Wielki_Zjazd_Gosiomaniakow.html" class="sxdx">Walentynki i Wielki Zjazd</a><br>
<a href="Sopot.html" class="sxdx">Sopot Festival 2006</a><br>
<a href="GTNL.html" class="sxdx">Gwiazdytancza na lodzie</a><br>
</fieldset>
</div>

<!-- DIV CONTENENTE LA SEZIONE 'CONCERTI' -->

<div id="concerti">
<fieldset>
<legend>CONCERTI</legend>
<a href="Klubie_Tuba.html" class="sxdx">Klubie Tuba</a><br>
<a href="Zdjecie_rozne.html" class="sxdx">Zdjęcie różne</a><br>
<a href="Sremie_i_Suchowola.html" class="sxdx">Śremie i Suchowola</a><br>
</fieldset>
</div>

<!-- DIV CONTENENTE LA SEZIONE 'ALTRE' -->

<div id="altre">
<fieldset>
<legend>ALTRE</legend>
<a href="Wallpapers.html" class="sxdx">Wallpapers</a><br>
<a href="Altre_foto.html" class="sxdx">Altre foto</a><br>
<a href="EMA_2006.html" class="sxdx">Eska Music Awards 2006</a><br>
<a href="Suwalki.html" class="sxdx">Suwałki</a><br>
<a href="SW2009.html" class="sxdx">Sesja Walentynkowa 2009</a><br>
</fieldset>
</div>
</div>

<!-- CHIUSURA DIV CONTENENTE LE SEZIONI FOTOGRAFICHE -->

<!-- DIV VALIDAZIONI -->

<div id="validate">
<a href="">
<img src="" alt="Valid HTML 4.01 Strict" height="31" width="88">
</a>
<a href="">
<img style="border:0;width:88px;height:31px" src="" alt="CSS Valido!">
</a>
</div>

<!-- DIV FOOTER -->

<div id="footer">
<a href="principale.html" class="sxdx">TORNA ALLA HOME PAGE</a>
</div>
</div>
</body>
</html>

Parte CSS:

* { margin: 0; padding: 0; }
html {
background-color: white;
background-image: url(Skins/Gosia_Andrzejewicz_3.jpg);
background-repeat: no-repeat;
background-position: center;
color: #000000;
font: 190% "Ignacio", "Sybil Green", arial, sans-serif;
font-weight: bold;
}
body {
background-position: center;
margin: 0;
padding: 0;
text-align: center;
}
p {
margin: 35px;
font-family: "Ignacio", "Sybil Green", arial, sans-serif;
text-align: center;
}
a {
background-color: inherit;
color: blue;
padding: 1px 0;
line-height: 52.5px;
}
#container {
margin: auto;
text-align: left;
}
#header {
text-align: center;
/*margin-left: -50px;*/
}
div#gallery {
text-align: center;
width: 30em;
margin: auto;
}
div#album {
float: left;
width: 15em;
text-align: center;
}
div#concerti {
float: left;
width: 15em;
text-align: center;
margin-top: 20px;
}
div#eventi {
float: left;
width: 15em;
text-align: center;
}
div#altre {
float: left;
width: 15em;
text-align: center;
margin-top: 20px;
}
div#validate {
text-align: left;
margin: auto;
width: 800px;
}
p.presentazione {
font-family: "Ignacio", foo, bar, verdana;
font-size: 60%;
color: black;
text-align: center;
margin: 20px;
}
a.sxdx {
font-family: "Curlz MT";
font-size: 50%;
}
body {
margin:0 1px 0 0;
}
fieldset {
width: 400px;
text-align: center;
}
legend {
font-family: "Curlz MT", foo, bar, verdana;
font-size: 40%;
font-style: italic;
color: black;
}
img {
margin-top: 15px;
border: 0;
}
#footer {
/*position: relative;*/
bottom: 0;
margin: 0;
text-align: center;width: 800px;
/*margin-left: -50px;*/
}

Il file CSS è ovviamente quello utilizzato per Firefox..., ovvero 'GalleriaMF.css'... Ovviamente se si ruscisse a trovare una soluzione ideale per il centramento in entrambi i browsers sarebbe anche meglio..., così magari toglierei anche lo script in JS per la scelta del file CSS... Cmq, aspetto fiducioso in qualche prezioso consiglio... Grazie anticipatemente!!!

[kurts]

qui ho postato un template moooooolto semplice tanto per fare un esempio ma che risolve il problema del centramento in FF/IE.

prova a buttare un occhio