chiarimento Box Model hack

[Geppo Hylar]

Ritaglio una parte del mio foglio di stile:
-------------------------------------------------
/* inizio contenitore di tutto */
div#struttura { /* contenitore del div di tutti i contenuti della pagina */
margin: 10px auto 0px auto; border: #0572a0 inset 3px; padding: 0px;
text-align: center; /* IE5.x */
width: 744px; \width: 750px; w\idth: 744px; /* dim. netta contenuto 744px */ overflow: hidden;
}
/* fine contenitore di tutto */
-------------------------------------------------

La parte che riguarda la larghezza "width" non l'ho capita molto bene, ho letto un articolo qua su html.it, ma lo spara così senza spiegare molto. Mi sembra di aver capito che il primo width: specifica la dimensione netta (che voglio sia 744px), il secondo \width: è la dimensione lorda, comprensiva di bordo e padding (nel mio caso, siccome il padding è 0px, il margine mi sembra di capire non conti e il bordo è 3px per lato: ottengo 744+3+3=750px).
Il terzo w\idth: non capisco a cosa si riferisce!! Qualc'uno lo sa?
Inoltre se al suo interno metto un filmato flash di 744px viene tagliato di pochi pixel verso il lato destro!!! Come mai?

Sto cercando di usare questo hack perchè mi sembra che dia lo stesso risultato su tutti i browser e sia molto elegante da scrivere.
Un saluto

[slegolego]

sono appunto hack
per permettere ad ogni browser di renderizzare correttamente i contenuti
specialmente IE5 e IE6

\width: 750px; /* ignored by all but ie5+6 */ [attributo ignorato da tutti i browser tranne che IE5 e IE 6]
w\idth: 750px; / * value for compliant browsers and ie6, ignored by ie5's */ [attributo ignorato solo da IE 5]
fonte
detto questo
penso che i pixel che vengono mangiati nel tuo filmato in flash dipendano dal border di 3 pixel

tu che browser stai usando?

[Geppo Hylar]

Originariamente inviato da slegolego
sono appunto hack
per permettere ad ogni browser di renderizzare correttamente i contenuti
specialmente IE5 e IE6

\width: 750px; /* ignored by all but ie5+6 */ [attributo ignorato da tutti i browser tranne che IE5 e IE 6]
w\idth: 750px; / * value for compliant browsers and ie6, ignored by ie5's */ [attributo ignorato solo da IE 5]
fonte
detto questo
penso che i pixel che vengono mangiati nel tuo filmato in flash dipendano dal border di 3 pixel

tu che browser stai usando?

Ciao slegolego, grazie, son andato anche a vedere l'articolo che hai linkato. Grazie della traduzione.
Io come browser uso epiphany su debian e poi ho altri 2 pc, uno con explorer 6 e un'ltro con explorer 7 ed in entrambi sembra visualizzarsi bene. Ho provato a togliere dal foglio di stile il comando: "overflow: hidden;"
E il filmato flash non sborda. Credevo sbordasse perchè una scritta molto grande contenuta nel filmato flash subiva un taglio nell'ultima lettera quando visualizzavo con explorer.
Invece bisogna stare attenti perchè a quanto sembra i vari browser non visualizzano con le stesse dimensioni una scritta in flash!!
Per quanto riguarda explorer 5 non ho modo di poter testare.

Non capisco una cosa però:
se tutte le versioni di explorer tolgono dalla larghezza dichiarata il padding e i bordi, perchè trattare in maniera diversa explorer 6 ? Non ha lo stesso difetto del 5?
e il 7 come si comporta? ci vorrebbe una direttiva anche per lui?

[slegolego]

ciao Geppo
non so per qunato riguarda IE7
ma questi sono hack, workaround, ovvero qualche scorciatoia per aggirare i vari disastri di IE

per questioni di validazione e pulizia del codice
di solito io utilizzo i commenti condizionali

es
<!--[if IE 5]>
<link rel="stylesheet" type="text/CSS" href="iefix.CSS">
<![endif]-->
solo IE5 prende il foglio di stile indicato

<!--[if gt IE 6]>
<link rel="stylesheet" type="text/CSS" href="iefix.CSS">
<![endif]-->
tutte le versioni SUPERIORI al 6 prendono il foglio di stile indicato

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/CSS" href="iefix.CSS">
<![endif]-->
tutte le versioni INFERIORI o UGUALI al 7 prendono il foglio di stile

questo commento condizionale va inserito appena prima della chiusra </head>

i file CSS caricati col commento condizionale vanno a sostituire quelli del CSS normale solo in caso di renderizzazione con i browser dichiarati nel commento stesso
per tutti gli altri vale il CSS principale

in parole povere significa
che il file iefix.css non sara' lungo come il css principale, ma conterra' solo quei pochi attributi, modificati a dovere, per non fare sballare il layout nelle varie versioni di IE

alla prossima

[Geppo Hylar]

questo tuo ultimo metodo mi sembra molto pulito e completo. Non lo avevo ancora visto in maniera completa, presentato così sembra molto bello. Inoltre anche se il mio primo metodo era comunque validato dal W3C questo sicuramente da meno problemi!
Ora mi basta andare a cercare le differenze tra i vari browser. Almeno per quanto riguarda le dimensioni. Proverò a cercare in rete, faccio un prospeto e poi magari lo pubblico qua sul forum. Nel caso sia utile a qualche altro apprendista.
Grazie slegolego!
Alla prossima e a buon rendere!