Ciao a tutti
Per fortuna ho trovato un forum abbastanza frequentato dove si discute di CSS. Spero sarete in grado di aiutami e che magari, quando più esperto, possa dare anch'io il mio contributo

Da poco mi sono convertito al webdesign "pulito" e standard basato su XHTML + CSS. Chiaramente i problemi ci sono ma uno ad uno li sto superando. Ora però sono ad un punto fermo da qualche giorno ormai: mi scontro con la differente resa tra i browser e probabilmente con i bug di Explorer.

Al sodo:
Mi piacciono molto i layout centrati, ampiezza fissa, con intestazione, due o tre colonne sottostanti e footer della stessa ampiezza dei precedenti. Mi sono messo a fare un sito e quando sono stato abbastanza soddisfatto della resa in Explorer, mi sono reso conto che in Firefox c'era un altro sito!

Questo è ciò che si vede in Explorer (gabbie del contenuto evidenziate) ed è più o meno ciò che vorrei si vedesse in tutti i browser:



mentre questo è ciò che si vede in Firefox:



Ho evidenziato i tre problemi che saltano all'occhio:
(1) Non so perché ma il background del div che contiene i due div di contenuto non li segue; inoltre le dimensioni e la posizione delle gabbie è abbastanza diversa
(2) La barra di navigazione è una lista CSS con effetto rollover. Ho calibrato l'altezza dei background e dei block in modo che 4 bottoni riempissero proprio l'altezza dell'elemento flash sulla sx; in Firefox i block risultano meno alti (o forse risultano più alti in Explorer) e così mi perdo un pezzo e salta l'allineamento dell'immagine sotto
(3) Il font dei bottoni viene reso diverso tra i due browser nonostante abbia settato la font-family.

Questa pagina si trova a questo link

La struttura della pagina è fatta così:
codice:
<body>

<div id="header">
[img]images2/logo_testo.jpg[/img]
</div>


<div id="nav">


<object ...etc. etc.... width="569" height="208" align="left">
  <param name="movie" value="....swf" />
  <embed src="....swf" width="569" height="208" loop="false" align="left"></embed>
</object>


<div id="list-menu">
  <ul>[*]Ingegneria Civile[*]Ingegneria Industriale[*]Ingegneria Informatica[*]Formazione[/list]
  [img]Grafica/bordino.gif[/img]
  </div>
</div>


<div id="main">
	<div id="main_left">
		<h2>Titolo colonna di sinistra</h2>
		

...</p>
  </div>
  <div id="main_right">
		<h2>Titolo colonna di destra</h2>
		

...</p>
  </div>
</div>

<div id="footer">
  

Footer
  </p>
</div>

</body>
Posto qui sotto la parte di CSS che descrive le gabbie:
codice:
body {
	margin: 0px;
	background: Silver;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
}

/*********** PAGE STRUCTURE ***********/

#header {
	background: white url(images/bordino_header.gif) no-repeat top;
	height: 40px;
	width: 730px;
	
	border-bottom-width: 16px;
	border-bottom-style: solid;
	border-bottom-color: #DCDCDC;
	margin: 30px auto auto;
	padding: 60px 15px 0px;
}

#nav {
	background: White;
	width: 760px;
	margin: 0 auto;
	padding-top: 2px;
}

#main {
	background: White;
	width: 744px;
	margin: 0 auto auto;
	padding: 8px;
	clear: both;
}

#main_left {
	width: 400px;
	margin: 0 15px auto 30px;
	padding: 8px;
	float: left;
	background-color: #F5F5DC;
}

#main_right {
	width: 230px;
	margin: 15 auto 20px;
	padding: 8px;
	float: left;
	background-color: #F0F8FF;
}

#footer {
	clear: both;
	background: White url(images/bordino_footer.gif) no-repeat bottom;
	width: 720px;
	padding: 20px 20px 15px 20px;
	margin: 0 auto;
	font-size: 0.8em;
}
mentre il menu è definito in:
codice:
#list-menu {
float: left;
width: 191px;
}

#list-menu ul {
margin: 0; 
padding: 0;
list-style-type: none;
} 

#list-menu li {
margin: 0px auto 0px auto;
} 

#list-menu a {
display: block;
width:173px;
height: 24px;

padding: 20px 8px 0px 10px;
background: url(images/sfondo_bottoni.jpg);
font: 11px Arial Helvetica sans-serif;
color: White;
text-decoration: none; /*lets remove the link underlines*/
text-align: right;
margin: 0px;
 border: 0px;;
} 

#list-menu a:link, #list-menu a:active, #list-menu a:visited {
font: 11px Arial Helvetica sans-serif;
color: White;
}

#list-menu a:hover {
font: 11px Arial Helvetica sans-serif;
color: White;
background: url(images/sfondo_bottoni.jpg);
background-position: -191px;
}
Ho letto in giro del differente box-model di Explorer rispetto allo standard ma non riesco a padroneggiare i suggerimenti proposti. Penso poi che questo non sia uno schema particolarmente complicato, quindi speravo di riuscire a sistemarlo facilmente ma sono ad un punto fermo.

Qualche consiglio?

P.S: Ho scritto un bel po'... grazie a quelli che hanno letto fin qua e moltissime grazie a quelli che vorranno aiutarmi