dimensionamento input e select non coerente

[Shores]

Sto lavorando in XHTML 1 transitional sotto IE7/8 e FF3.

Mi succede che nonostante io dica height:22px sia ad una input type=text che ad una select, la dannata select mi viene alta 18px, sia su ie7 che su ff...

Ho notato che se su ff metto -moz-box-sizing:content-box; la dimensione della select va a posto, perlomeno su FF.

Ora, al di là del fatto che non capisco per quale strana ragione la select dovrebbe avere di default un box model diverso dalla input, c'è secondo voi un modo cross browser di risolvere la cosa? Non ho necessità di supportare IE 6 e precedenti, ma comunque lui non ha la box-sizing se non in versione 8, e poi mi fa sempre un po' schifo usare delle estensioni proprietarie...

Vi è mai capitato?

Volendo posso creare un mock up di esempio, ma siccome mi richiederebbe un po' di tempo, intanto vi chiedo pareri così.

Grazie!

[mansportivo]

Originariamente inviato da Shores
Sto lavorando in XHTML 1 transitional sotto IE7/8 e FF3.

Mi succede che nonostante io dica height:22px sia ad una input type=text che ad una select, la dannata select mi viene alta 18px, sia su ie7 che su ff...

Ho notato che se su ff metto -moz-box-sizing:content-box; la dimensione della select va a posto, perlomeno su FF.

Ora, al di là del fatto che non capisco per quale strana ragione la select dovrebbe avere di default un box model diverso dalla input, c'è secondo voi un modo cross browser di risolvere la cosa? Non ho necessità di supportare IE 6 e precedenti, ma comunque lui non ha la box-sizing se non in versione 8, e poi mi fa sempre un po' schifo usare delle estensioni proprietarie...

Vi è mai capitato?

Volendo posso creare un mock up di esempio, ma siccome mi richiederebbe un po' di tempo, intanto vi chiedo pareri così.

Grazie!

anch'io ho lo stesso problema, nessuno ha risolto?

[Shores]

Rispondo io stesso perché poi ho scoperto altre cose...

Quello che ho scoperto è che in realtà, sono input type text e textarea ad usare di default il box model sbagliato: infatti , TUTTI i widget delle form secondo gli standard sono dei replaced elements, proprio come le immagini, e quindi devono utilizzare il box model ai bordi, ovvero quello per cui la width e la height COMPRENDONO padding e borders.

Purtroppo, di default quasi tutti i browser li mettono nel box model standard, quindi è necessario dire (dove input.text è una classe usata per selezionare gli input type text):

textarea, input.text
{
box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

che risolve tutti i problemi, tranne che... in IE6 e precedenti!

Per quei browser non esiste soluzione se non usare un foglio di stile diverso solo per loro, ed anche così non tutti i problemi si riescono a risolvere.

Ciao!

[Mich_]

IE lavora con una logica diversa dagli altri browser. Il suo box-model e` diverso. Il motivo e` storico: per la microsoft e` sempre stato piu` importante seguire la struttura delle versioni precedenti, che non adeguarsi alle specifiche del W3C. Per cui di default IE lavora in quirks mode (modalita` retrocompatibile).

Pero` ...
IE puo` anche lavorare in standard mode; lo fa di default quando la DTD e` XHTML 1.0 strict o successive. Questo dalla versione 6 in poi (le versioni precedenti non hanno la possibilita` di lavorare in standard mode).

Inoltre IE8 ha la possibilta` di lavorare in quirks mode anche per DTD Strict: per questo occorre inserire un meta apposito (non ne conosco la sintassi, ma e` stata citata alcune volte anche nel forum).

Quindi:
Il modo migliore (piu` moderno e piu` sicuro) e` passare alla DTD XHTML 1.0 strict (senza prologo XML), con cui si risolve per tutti gli IE, dal 6 in poi.
Restano poi alcuni problemi con IE6, che si possono risolvere con un CSS specifico inserito in commenti condizionali.

[Shores]

Originariamente inviato da Mich_
IE lavora con una logica diversa dagli altri browser. Il suo box-model e` diverso. Il motivo e` storico: per la microsoft e` sempre stato piu` importante seguire la struttura delle versioni precedenti, che non adeguarsi alle specifiche del W3C. Per cui di default IE lavora in quirks mode (modalita` retrocompatibile).

Pero` ...
IE puo` anche lavorare in standard mode; lo fa di default quando la DTD e` XHTML 1.0 strict o successive. Questo dalla versione 6 in poi (le versioni precedenti non hanno la possibilita` di lavorare in standard mode).

Inoltre IE8 ha la possibilta` di lavorare in quirks mode anche per DTD Strict: per questo occorre inserire un meta apposito (non ne conosco la sintassi, ma e` stata citata alcune volte anche nel forum).

Quindi:
Il modo migliore (piu` moderno e piu` sicuro) e` passare alla DTD XHTML 1.0 strict (senza prologo XML), con cui si risolve per tutti gli IE, dal 6 in poi.
Restano poi alcuni problemi con IE6, che si possono risolvere con un CSS specifico inserito in commenti condizionali.

No, perdonami Mich_, ma quello che dici, pur giusto in generale, è completamente sbagliato in questo caso: purtroppo, il fatto di usare un box model errato per input type text e textarea è una cosa che IE 6 e precedenti fanno ANCHE dandogli una DTD corretta e XHTML 1.0 Strict: lo so per certo perché già da tempo tutto il mio backend è scritto in perfetto XHTML 1.0 strict, e attiva la modalità standard di IE6, ma ciò nonostante le input text e le textarea continuano ad usare il box model sbagliato!

Quindi, sebbene il tuo consiglio sia un ottimo consiglio che mi sento di appoggiare in pieno, NON RISOLVE affatto questo problema; rimane comunque necessario fornire ad IE (in realtà anche la 7 ha dei problemi in questo senso) un foglio di stile differente, altrimenti questo problema non si risolve; ed anche così, non è possibile risolverlo se si intendono dimensionare i controlli della form in percentuale, visto che in quel caso le dimensioni non riescono comunque mai a combaciare tra widget differenti.