12 maggio 2006 Test sui form n. 3

Come terzo test sui form, si è scelto di modificare gli stili specifici per gli elementi label ed input. 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-top: 16px;
padding: 10px;
}

legend {
font-weight: bold;
margin: 0;
padding: 0;
}

label, input.txt, input.bot {
margin: 5px 2px;
display: inline-block;
padding: 0;
vertical-align: middle;
}

label {
text-align: center;
}

input.txt {
background: #e3f2f7;
color: #000;
border: 1px inset #ccc;
}

input.bot {
background: #add8e6;
color: #000;
border: 1px outset #00008b;
}

div.centra {
margin: 1em;
padding: 0;
}



Note:

Come si evince dal codice, sono stati applicati dei nuovi stili agli elementi label ed input, ed è anche stata aggiunta la classe .centra ad un contenitore generico. Il form si presenta ora più allineato 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 nel posizionamento del submit all'interno della nuova classe .centra, usata per definire il posizionamento. Si noti come in teoria la marginazione applicata a .centra e ad input avrebbe dovuto garantire una certa uniformità in tal senso. Questo è valido per Firefox ed Opera, ma non per Internet Explorer, che posiziona il submit più a destra rispetto ai sopracitati browser.
3. Si noti anche come la larghezza del submit sia notevolmente superiore in Internet Explorer.
4. Le differenze nell'allineamento orizzontale degli elementisono state appianate dichiarando tali elementi come inline-block ed assegnando loro la proprietà vertical-align. La semplice dichiarazione di inline non era sufficiente per Opera, che continuava ad allineare il testo di label più in basso rispetto al campo di testo del vicino input. Tuttavia questo allineamento è supportato correttamente solo dalla versione 9 di Opera. Precedenti versioni visualizzano il testo in alto.
5. La riflessione sulla proprietà display è scaturita dalla lettura di un post di Alessandro Fulciniti.

Conclusione: una citazione

Come si addice all'aspetto ibrido del nome di valore inline-block, gli elementi inline-block sono un ibrido di elementi di blocco ed elementi inline. Questo valore di visualizzazione è una novità dei CSS 2.1.

Un elemento inline-block si mette in relazione con altri elementi e contenuti come un riquadro inline. In altre parole, è disposto in una riga di testo proprio come un'immagine, e di fatto gli elementi inline-block sono formattati all'interno di una riga come un elemento rimpiazzato.

Questo significa che la parte inferiore di un elemento inline-block si troverà sulla linea di base della riga di testo per impostazione predefinita, e non eseguirà alcuna interruzione di riga al suo interno.

- Eric A. Meyer -

Riflessione

Abbiamo visto come solo Opera 9 interpreti gli elementi label ed input come elementi inline-block formattandoli come rimpiazzati e visualizzandoli correttamente. Firefox ed Internet Explorer sono concordi nell'interpretarli come elementi inline.