14 maggio 2006 Test sui form n. 5

Come quinto test sui form, si è scelto di modificare gli stili specifici per gli elementi label ed input, eliminando la dichiarazione diretta di stile e racchiudendoli all'interno di elementi span a cui sono state applicate le classi .etichetta, .txt e .bot. Il codice fino ad ora utilizzato è il seguente:

body {
margin: 0;
padding: 0;
background: #f8f8ee;
color: #000;
font: 76% Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: center;
}

form {
margin: 10em auto;
padding: 0;
width: 60%;
background: transparent;
text-align: left;
}

fieldset {
border: 1px solid #000;
margin: 0;
padding: 0;
display: block;
width: 100%;
}

legend {
font-weight: bold;
margin: 0 3px;
padding: 2px;
border: 1px solid #000;
background: #ffe;
color: #000;
width: 150px;
}

span.etichetta, span.txt, span.bot {
margin: 0
display: block;
float: left;
padding: 0;
}

span.etichetta {
text-align: right;
width: 100px;
height: 20px;
line-height: 20px;
margin: 1em 0.5em;
font-weight: bold;
}

span.txt {
background: transparent;
color: #000;
border: none
width: 150px;
height: 20px;
line-height: 20px;
margin: 1em 0.5em;
padding: 0;
}

span.bot {
background: transparent;
color: #000;
border: none;
line-height: 20px;
width: 3em;
height: 20px;
font-weight: bold;
padding: 0 ;
margin: 1em 0.5em;
text-align: center;
}

div.centra{
margin: 0;
padding: 0;
width: 100%;
}

.reset {
clear: left;
}



Note:

Come si evince dal codice, sono stati creati dei nuovi stili con le classi .etichetta, .txt e .bot applicate ad elementi span che ora racchiudono gli elementi label ed input. Questo ci permette di studiare il comportamento di default dei browser quando manca una dichiarazione di stile diretta per questi elementi. anche stata modificata la classe .centra del contenitore generico. Poichè si fa uso del float è stata mantenuta la classe .reset per l'elemento br posizionato nel sorgente dopo il submit. Il form si presenta ora più compatto ed uniforme rispetto al precedente esempio. Permangono tuttavia delle differenze tra i vari browser:

1. Differenza nel rientro del bordo superiore sinistro dell'elemento fieldset, che risulta essere più pronunciato in Internet Explorer ed in Opera rispetto a quanto avviene in Firefox.
2. Si noti come l'allineamento del testo appare uniforme nei browser.
3. Si osserva altresì un supporto dell'ereditarietà alquanto oscillante: l'elemento label eredita la dichiarazione font-weight: bold;, cosa che non avviene per input.
4. Differenza nella dimensione di default del submit: Opera e Firefox sono concordi, mentre Internet Explorer stringe il submit attorno al contenuto. Un ulteriore dichiarazione di padding per la classe .bot vanifica l'uniformità di visualizzazione in Firefox ed Opera. Per ulteriori approfondimenti si veda "On Having Layout".
5. Si noti come Internet Explorer interpreti in modo non corretto la distanza fra il submit ed il campo di testo.

Conclusione

Questo ulteriore test ci ha permesso di ricreare in modo inperfetto e grossolano la situazione che si verifica quando gli elementi del form sono racchiusi in contenitori, ad esempio quando si usano le tabelle. Tuttavia l'elemento td ha caratteristiche completamente diverse da quelle presentate poc'anzi. Internet Explorer supporta ad esempio la proprietà min-height per le celle di una tabella, tabella che ha layout di default ( "On Having Layout" ). Ciò comporta un trattamento di "favore" da parte di Internet Explorer, cosa che non avviene per le regole di stile applicate sopra. È auspicabile che con la nuova release di Internet Explorer si tenga conto di questo fatto, e si implementi il supporto alla dichiarazione display: table-cell; che semplificherebbe di molto le cose, e permetterebbe anche a chi non è ancora passato ai fogli di stile di ottenere gli effetti prima realizzati con le tabelle.