13 maggio 2006 Test sui form n. 4

Come quarto test sui form, si è scelto di modificare gli stili specifici per gli elementi label, input, fieldset e legend. 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;
}

label, input.txt, input.bot {
margin: 0
display: block;
float: left;
padding: 0;
}

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

input.txt {
background: #e3f2f7;
color: #000;
border: 1px inset #ccc;
width: 150px;
height: 20px;
line-height: 20px;
margin: 1em 0.5em;
padding: 0;
}

input.bot {
background: #add8e6;
color: #000;
border: 1px outset #00008b;
line-height: 20px;
width: 3em;
height: 20px;
font-weight: bold;
padding: 0 2px;
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 applicati dei nuovi stili agli elementi label, input, fieldset e legend ed è anche stata modificata la classe .centra del contenitore generico. Poichè si fa di nuovo uso del float è stata reintrodotta 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. Differenza nell'allineamento del testo del submit all'interno della nuova classe .centra, usata per ridefinire il posizionamento avvenuto tramite float e marginazione. L'allineamento ottimale si ha solo in Opera.
3. Si noti anche come la larghezza del submit sia notevolmente superiore in Internet Explorer e Firefox rispetto ad Opera, nonostante una dichiarazione specifica nel foglio di stile.
4. Le differenze nell'allineamento verticale degli elementi sono state appianate dichiarando tali elementi come block ed assegnando loro un'altezza ed un'interlinea pari all'altezza. Questa tecnica è usata correntemente con le ancore di livello blocco nei menu.
5. Gli elementi si prestano docilmente al posizionamento tramite float e marginazione. Tuttavia le impostazioni di default dei browser influiscono pesantemente sulla visualizzazione. Sarebbe opportuno conoscere in anticipo le impostazioni ed i criteri di visualizzazione di default, così come avviene per esempio con le liste.

Conclusione

L'influenza delle impostazioni di default di ogni singolo motore di rendering merita uno studio attento ed una documentazione precisa. Comprendendo tali impostazioni si possono mettere in atto delle strategie per ovviare a dei problemi di visualizzazione. Se ad esempio il problema è con un browser specifico, si possono usare degli hack per servire a tale browser del codice "addomesticato". Come si è visto da questi test, i problemi non nascono solo col tristemente famoso Internet Explorer. La differenza fra browser è notevole, anche se gli standard sono unici. Un solo dio, molte religioni.