Niubbo e compatibilità!

[Shryne]

Ciao a tutti... ho un grossissimo problema con dei CSS... sono abbastanza nuovo di questa tecnica ma cimentandomi ho notato dei buoni risultati... il problema sta che tutto si visualizza benissimo con IE ma quando guardo il sito con mozilla... tadan... viene tutto buttato sull'angolo in alto a sinistra... invece dovrebbe essere centrato...
Se allego il codice qualcuno può aiutarmi?!?!?
Il layout della pagina è il classico: header, 2 colonne e footer...

PS. potete vedere la pagina cliccando qui

body {
	background-color: #660000;
	background-image: url(images/bg.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #000000;
	margin: 0px;
	text-align: center;
	height: 100%;
}

div#sfondo {
	width: 100%;
	height: 100%;
	background-attachment: fixed;
	background-image: url(images/bg_head.jpg);
	background-repeat: repeat-x;
	background-position: top;
	text-align: center;
}

a:hover {
	font-size: 10px;
	font-style: normal;
	font-weight: bolder;
	color: #660000;
}

a {
	font-size: 10px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
}

a:visited {
	font-size: 10px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
}

div#container {
	background-color: #FFCC00;
	height: 100%;
	width: 630px;
	float: no;
	text-align: center;
}

div#header {
	height: 171px;
	width: 630px;
	margin: 0px;
	padding: 0;
	border-bottom: 2 px #660000 dashed;
	top: 0;
	
}
div#menu {
	width: 630px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	margin: 0px;
}

div#main {
	left: 0;
	text-align: left;
	float: left;
	width: 430px;
	margin: 5px;
	padding: 5px;
	font-size: 10px;
	border-top-color: #FFCC00;
	border-bottom-color: #FFCC00;
	border-right-width: 2px;
	border-right-style: dashed;
	border-right-color: #660000;
}

div#news {
	width: 400px;
	font-size: 10px;
	background-color: #660000;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: dashed;
	border-left-style: none;
	border-top-color: #ffcc00;
	border-right-color: #ffcc00;
	border-bottom-color: #ffcc00;
	border-left-color: #ffcc00;
	color: #FFFFFF;
	padding: 3px;
}

div#news p {
	color: #FFFFFF;
}

div#news a {
	color: #FFFFFF;
}

div#box {
	font-size: 10px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: dashed;
	border-left-style: none;
	border-top-color: #660000;
	border-right-color: #660000;
	border-bottom-color: #660000;
	border-left-color: #660000;
	padding: 3px;
}

div#footer {
	width: 624px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #FFFFFF;
	background-color: #000000;
	padding: 3px;
	text-align: center;
    clear: right;
	bottom: 0;
}

div#footer a {
	font-size: 9px;
	color: #FFFFFF;
}

div#lato {
	right: 0;
	top: 260px;
	font-size: 10px;
	width: 152px;
	height: 100%;
	vertical-align: top;
	float: right;
	text-align: right;
	margin: 3px;
	padding: 3px;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #000000;
}

[Mich_]

Anzitutto conviene sistemare prima per gli altri browser e poi adattare per IE (con hack o commenti condizionali).

Poi tieni presente che nei browser standard, il text-align agisce sul testo contenuto in un blocco, e non su oggetti di tipo blocco.
Per centrare oggetti devi inserire:
margin 0 auto;
nell'oggetto da centrare.
Purtroppo il text-align e` necessario per sistemare le cose con IE, che non riconosce i margini auto.
Di buono c'e` che le due cose non si danno troppo fastidio, per cui possono coesistere senza necessita` di hack complessi.