[CSS] Centrare tutto... in FireFox

[dies]

ciao raga,

scusate il topic acriptico, ma....

il codice seguente l'ho preso da layout-matic, mi capita che in FireFox non si centra, ma tutto il contenuto si sposta a sinistra.

Come si può risolvere?


grazie

<style type="text/css">
		html, body {
		padding:0px 0px;
		margin:0px 0px;
		text-align:center;
		}
		
		body{background: #FFF url(./image/sfondo.jpg) repeat-y center;
	    }
								
		#container {
			width: 750px;
			\width: 770px;
			w\idth: 750px;
			margin: 0px 0px;
			padding: 0px;
		}

		#banner {
			padding: 0;
			margin: 0px 0px;
		}

		#content {
			padding: 0px 0px;
			background-color: #FFF;
		}

		#menudown {
			height:35px;
			clear: both;
			padding: 0;
			margin: 0px 0px;		
			background: #fff url(./image/barra.jpg) no-repeat;
		}
		#footer {
			font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
			position:relative;
			bottom:0px;
			clear: both;
			padding: 0px 0px;
			margin: 0px 0px;		
			background-color: #eee;
		}
		
		div#nav{margin:0px 0 0 0px}
		div#nav ul{width: 650px;height: 25px;overflow: hidden; list-style-type: none;margin: 0;padding: 0; background:url(h-matrix.jpg) no-repeat 0 -25px}
		div#nav li{margin: 0;padding: 0}
		div#nav li,div#nav a{float: left;width: 130px;height: 35px}

		div#nav a{text-indent: -9000px;text-decoration: none;padding: 25px 0 0 0; overflow: hidden; height: 0px !important; height /**/:25px; background-image: url(h-matrix.jpg)}

		li#mhome a{background-position: 0px 0px}
		li#mhome a:hover{background-position: 0 -25px}
		body#home li#mhome a{background-position: 0 -50px}

		li#mprod a{background-position: -130px 0px}
		li#mprod a:hover{background-position: -130px -25px}
		body#prod li#mprod a{background-position: -130px -50px}

		li#mserv a{background-position: -260px 0px}
		li#mserv a:hover{background-position: -260px -25px}
		body#serv li#mserv a{background-position: -260px -50px}
		
		li#mport a{background-position: -390px 0px}
		li#mport a:hover{background-position: -390px -25px}
		body#port li#mport a{background-position: -290px -50px}
		
		li#mcont a{background-position: -520px 0px}
		li#mcont a:hover{background-position: -520px -25px}
		body#cont li#mcont a{background-position: -520px -50px}
		
		#col1 {
		font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
		text-align: left; border-right: #999 1px solid; padding-right: 2%; float: left; margin-bottom: 1em; width: 44%;margin-left: 2%; 
		}
		#col2 {
		font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
		text-align: left; border-right: #999 1px solid; padding-right: 2%; float: left; margin-bottom: 1em; margin-left: 1%; width: 30%;	
		}
		#col3 {
 		font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
		text-align: left; float: left; margin-bottom: 1em; margin-left: 1%; width: 19%;
		}
		
		#colbook1 {
		font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
		text-align: left; padding-right: 2%; float: left; margin-bottom: 1em; width: 44%;margin-left: 2%; 
		}
		#colbook2 {
		font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
		text-align: left; padding-right: 2%; float: left; margin-bottom: 1em; margin-left: 1%; width: 30%;	
		}
		
		h1 {
		text-align: left; padding-right: 0.5em; padding-left: 0.5em; padding-bottom: 0.5em; margin: 0px; padding-top: 0.5em
		}
		h2 {
		text-align: left; margin-top: 0px;
		}

</style>

[seed_squall_it]

#container {
width: 750px;
\width: 770px;
w\idth: 750px;
margin: 0 auto;
padding: 0;
}

Questo per centrare l'elemento #container all'interno del suo genitore (body). E' questo il modo corretto per centrare orizzontalmente un elemento block-level, non con text-align: center nella regola dell'elemento padre, come fa invece quell'indecente di IE!

[dies]

P E R F E T T O!


un ultima domanda, come posso far sì di inserire quel foglio di style come file esterno, senza che si "imputtani" il tutto?

grazie

dies

[seed_squall_it]

Basta che ti salvi tutte le regole di stile in un file con estensione .css e lo richiami all'interno della pagina con il tag <link /> nella sezione HEAD:

<link rel="stylesheet" type="text/css" href="PERCORSO_FILE_CSS" media="screen" />

Ricorda solo che in questo modo i percorsi delle immagini di sfondo nel file CSS devono essere riferiti sempre alla posizione di questo file, non a quella delle pagine che lo richiamano.