[css] border e firefox

[eraclito]

ciao a tutti, ho un box fatto così:

<div class="riquadro_tit">Titolo
</div>
<div class="riquadro3">titolo1

tutolo2

....
</div>

questi gli stili:

.riquadro_tit {
	padding: 3px;
	background-color: #efefef;
	vertical-align: top;
	width:210px;
	border-top: 1px solid #666666;
	border-right: 1px solid #666666;
	border-bottom: 1px none #666666;
	border-left: 1px solid #666666;
}

.riquadro3 {
	padding: 3px;
	border: 1px solid #666666;
	text-align:left;
	vertical-align: top;
		overflow: auto;
		height:150px;
		width:210px;
}

su ie il box è correttamente largo 210 px
su firefox è + grande (228 circa). ho visto che eliminano i border si risolve, ma non capisco perchè (e non capisco come fare i border in alternativa).

sapete dirmi come risolvere?

eraclito

[Mich_]

Secondo le regole W3C:
riquadro3 e` largo: 3+1+210+1+3 = 218
riquadro_tit non puo` rispettare la larghezza, dato che l'oggetto interno e` piu` largo, quindi vengono aggiunti 1+3+1+3 px per border e padding.

Se cerchi la regola di tantek trovi come sistemare IE in modo che funzioni come i browser compliant

[eraclito]

Originariamente inviato da Mich_
Secondo le regole W3C:
riquadro3 e` largo: 3+1+210+1+3 = 218
riquadro_tit non puo` rispettare la larghezza, dato che l'oggetto interno e` piu` largo, quindi vengono aggiunti 1+3+1+3 px per border e padding.

Se cerchi la regola di tantek trovi come sistemare IE in modo che funzioni come i browser compliant

ho fatto qualche ricerca, e se non ho capito male la tantek è questa:

width:756px;
voice-family: "\"}\"";
voice-family:inherit;
width:754px;

è però data per explorer 5, io ho problemi anche sul 6 e con l'aggiunta del codice non risolvo...

Esistono alternative al padding?

eraclito

[Mich_]

Il margin si comporta in maniera uguale in tutti i browser.

Eventualmente puoi inserire un ulteriore <div> per usare solo il margin e non il padding.

Se non capisci queste parole, devi andarti a guardare il "box model" in un tutorial CSS.

[eraclito]

Originariamente inviato da Mich_
Il margin si comporta in maniera uguale in tutti i browser.

Eventualmente puoi inserire un ulteriore <div> per usare solo il margin e non il padding.

Se non capisci queste parole, devi andarti a guardare il "box model" in un tutorial CSS.

ho capito

ma avrei un'altra domanda:

se facessi invece

<div classe=classe_vecchia_senza_padding>
<div casse=classe con solo il padding>
testo
</div>
</div>

può funzionare? il padding fa casini anche se "solo?"

sul pc mio sembra finzionare, ma non vorrei incotrare altri casini...

grazie

eraclito

[Mich_]

Si`, l'interpretazione del padding e` diversa tra i browser.

Per i browser conformi, la larghezza di un oggetto e` data da:
width + padding + border + margin

Per i browser IE invece:
width + margin (non ricordo se anche + border)

Questo non e` vero per IE6 se il Doctype e` XHTML 1.0 Strict o superiore

[eraclito]

Originariamente inviato da Mich_
Si`, l'interpretazione del padding e` diversa tra i browser.

Per i browser conformi, la larghezza di un oggetto e` data da:
width + padding + border + margin

Per i browser IE invece:
width + margin (non ricordo se anche + border)

Questo non e` vero per IE6 se il Doctype e` XHTML 1.0 Strict o superiore

okq questo mi è chiaro, quello che non ho capito è se in questo caso:

<div style="width:260px";>
<div style="padding=3px";>
testo
</div>
</div>

i browser si comportano nello stesso modo (visto che la larghezza è settata prima del padding per cui dovrebbe essere 260 per tutti...)

[Mich_]

Si`, se all'interno del <div> non c'e` nessun elemento che determina la larghezza.

Se il testo (senza spazi) e` piu` largo di width meno padding, in IE il blocco viene allargato, dato che in IE il width vale come min-with degli altri browser.

[eraclito]

Originariamente inviato da Mich_
Si`, se all'interno del <div> non c'e` nessun elemento che determina la larghezza.

Se il testo (senza spazi) e` piu` largo di width meno padding, in IE il blocco viene allargato, dato che in IE il width vale come min-with degli altri browser.

grazie, in questo modo dovrei esserne venuto a capo

vado a cercarmi un explorer 5 per vedere se non mi fa altri casini...

eraclito

ps il buon billone gates poteva mettrsi d'accordo con gli altri... mi fa sempre uscire pazzo

[Mich_]

Originariamente inviato da eraclito
ps il buon billone gates poteva mettrsi d'accordo con gli altri... mi fa sempre uscire pazzo

Il bello e` che e` uno dei principali finanziatori del W3C.
Quindi prima che con gli altri deve mettersi d'accordo con se stesso (e questo e` la cosa piu` dificile, credo).

E se usi XHTML Strict in IE6 funziona (quasi) come gli altri.

Per IE5:
Ci sono varie versioni: in ie5.0 o 5.2 il supporto ai CSS e` molto scarso; in ie5.5 comincia ad essere serio.
IE5.0 credo ce ne siano pochissimi in giro, invece il 5.2 e` ancora usato sui Mac.