bordi che sbordano in Firefox

[andcravo]

ciao a tutti.

stavo cercando di capire il funzionamento di div che si annidano in altri div, e ho notato una cosa che accade con firefox e che non accade con IE.

mi spiego.
all'interno di un div contenitore devo inserire un div che sia caratterizzato da uno sfondo e da un bordo (deve tipo contenere un testo che funga da titolo ad una sezione).
ho quindi definito nel foglio di stile una classe "content" senza margini o padding e di colore bianco

.content {
	width: 550px;
	background-color: #FFFFFF;
	border-width: 0px;
	padding: 0px;
	margin: 0px;
	height: auto;
	position:relative;
	}

e poi una classe "titolo" nella quale definisco anche delle caratteristiche di font

	.titolo {
	font-family: Arial;
	font-size: 11px;
	font-style: normal;
	background-color:#B5B4B0;
	height: auto;
	width: 100%;
	border: 3px solid #000000;
        padding: 2px;
	color: #000000;
	margin-top:20px;
	}

quello che vorrei è che il div del titolo sia largo esattamente quanto il div contenitore, e che non sbordi a destra.

in IE questo accade
in firefox mi sborda esattamente di un numero di pixel pari a due volte il bordo, più due volte il padding (che dovrebbe controllare solo il margine interno e non quello esterno... almeno secondo quello che pensavo fosse logico...)



in questo caso mi sembra più sensato il comportamento di IE...
se le dimensioni del contenitore sono fissate, e se dico al browser che quelle del contenuto devono essere esattamente quelle del contenitore (width 100%) perchè firefox si ostina a allargarsi? certo, potrei tenerne conto, dire a firefox che il div "titolo" non è largo 100%, ma 550-(2+5)*2... solo che se faccio così, poi sarà IE a fare il div "titolo" troppo piccolo...

quindi:
come faccio a creare un codice che sia compatibile con entrambi, e che mi faccia un div "titolo" largo esattamente quando "contenitore"?


grazie della pazienza, e dell'aiuto

andrea

[andcravo]

mi rispondo da solo... è buffo che si sta un pomeriggio su una cosa, non riuscendo ad uscirne fuori, poi si chiede aiuto un po' disperatoi, e dopo 10 minuti di altri tentativi si capisce cosa c'è che non va...

mi è bastato non definire le caratteristiche di padding e di border nel div titolo, ma farlo in un ulteriore div interno al div "titolo", così:

<div class="content">

<div class="titolo_sez">
<div style="padding:5px; border:2px #000000 solid"> Titolo </div>
</div>	

</div>

e funziona :-)

[atigra]

Il motivo sta in questo: il width totale di un div per IE è tutta un'altra cosa rispetto agli altri browser.
In IE: width totale = width + padding + margin + border
negli altri browser: width totale = width (e basta)

Tu infatti avevi dato allo stesso div sia width, padding e border.