problema css crossbrowser

[Noise85]

Salve a tutti!

Ho un problema con i css per il sito che sto sviluppando!
Questo foglio di stile che vi presento sotto viene creato dinamicamente e importato nella pagina principale del sito.
Ho tutti gli identificatori a id che puntano ai relativi div.
La sezione che mi da problemi è il #body (che punta guarda a caso proprio al div contenente corpo della pagina).

Ora con firefox tutto ok, la pagina viene visualizzata in modo perfetto, ma con ie6 tutto questo non accade. Il div #body contenuto è spostato in basso e lateralmente verso sinistra
Ho intuito che il problema sta nel fatto che firefox legge la larghezza e l'altezza del div e ne aggiunge il padding (qui sotto impostato a 40px) mentre ie no.

esempio:
ie: width: 500px; padding: 40px; larghezza totale = 500px;
firefox: width: 500px; padding: 40px; larghezza totale = 540px;

notate infatti il commento nella sezione #body.
è un eresia quello che sto ammettendo o è la verità?
dove sto sbagliando di preciso?
come fareste voi a evitare di sviluppare due fogli di stile a seconda del browser?

mod:
per chiarire tutti aggiungo anche l'url del sito in questione
http://www.agetroveredo.ch/afop2/main.php5
provate a cliccare su tutti i bottoni sia con ie che con ff

Grazie

/* css document */
body {
	text-align: center;
	margin-top: 20px;
}

#container {
	width: 616px;
	height: auto;
	margin: 0px auto;
	text-align: left;
	font-family: sans-serif;
}

#langbar {
	padding-right: 10px;
	text-align: right;
}

#header {
	padding: 0px;
}

#menu {
	float: left;
	padding-right: 0px;
}

#logo {
	text-align: right;
	padding-right: 15px;
	padding-top: 8px;
}

#body {
	clear: left;	
	width: 535px; /* 615px - 2 * 40px */
	height: 396px; /* 484px - 2 * 40px */
	padding: 40px;
<?php
if(isset($_GET['mod']))
{
	switch($_GET['mod'])
	{
		case 1:
?>
	background-image: url(it/img/bg_who.gif);
<?php
		break;
		case 2:
?>
	background-image: url(it/img/bg_where.gif);
<?php
		break;
		case 3:
?>
	background-image: url(it/img/bg_what.gif);
<?php
		break;
		case 4:
?>
	background-image: url(it/img/bg_gal.gif);
<?php
		break;
		case 5:
?>
	background-image: url(it/img/bg_contact.gif);
<?php
		break;
		case 6:
?>
	background-image: url(it/img/bg_admin.gif);
<?php
		break;
		default:
?>
	background-image: url(it/img/bg_who.gif);
<?php
	}
}
else if(!isset($_GET['mod']))
{
?>
	background-image: url(it/img/bg_who.gif);
<?php
}
?>
	background-repeat: no-repeat;
	font-size: 12px;
	text-align: justify;
}

#footer {
	width: 615px;
	height: 34px;
	text-align: center;
	background-image: url(layout/footer.gif);
	background-repeat: no-repeat;
	font-size: 10px;
	font-weight: bold;
	padding: 14px 0px 10px 0px;
}

ciao e GRAZIE

[fcaldera]

Originariamente inviato da Noise85
Ho intuito che il problema sta nel fatto che firefox legge la larghezza e l'altezza del div e ne aggiunge il padding (qui sotto impostato a 40px) mentre ie no.

esempio:
ie: width: 500px; padding: 40px; larghezza totale = 500px;
firefox: width: 500px; padding: 40px; larghezza totale = 540px;

E' un comportamento dovuto all'errata interpretazione del box model in IE6 ed inferiori

Se ti interessa estendere la resa al solo explorer 6 ti basta usare un doctype xhtml1.0 (che infatti manca sulla tua pagina)

Se vuoi garantire la stessa resa su Explorer 5 non si sfugge: è necessario ricorrere ai commenti condizionali con tutti gli aggiustamenti sulle dimensioni.

[Noise85]

grazie mille funziona!!
ma perché funziona con la dichiarazione e senza no? (newb question hehe )

e con ie 7 ci sono problemi del genere?

[fcaldera]

Originariamente inviato da Noise85
grazie mille funziona!!
ma perché funziona con la dichiarazione e senza no? (newb question hehe )

e con ie 7 ci sono problemi del genere?

cerca su google "doctype", "quirks mode" e "compliant mode" per avere qualche info in più

Con IE7 non il problema non si pone. Il box model è corretto in quel browser