Ecologia dei siti web.net

16 novembre 05

Oddio, mi sono venuti i doppi margini!

di Maurizio Boscarol

Uno dei più sorprendenti bachi che si possono incontrare quando si impaginano con il float dei blocchi di contenuto riguarda Explorer per Windows (5.0, 5.5 e 6), ed è noto come Doubled Float-Margin Bug.

In pratica accade che se usate il float per un blocco di impaginazione all’interno di un contenitore più grande, e contemporaneamente usate un margine che va nella stessa direzione del float, Explorer raddoppierà in maniera del tutto arbitraria il valore di quel margine! Forte, eh? Ed è gratis!

Esempio:

Ecco il codice css relativo all’elemento interno:

width: 100px;
height: 80px;
border: 1px solid #444;
background: #ccc;
float: left;
margin-left: 50px;

In questo esempio con Explorer il margine sinistro sarà di 100px, e comparirà come nell’immagine qui sotto:

Nota: se usate explorer, ovviamente non vi accorgete della differenza: il margine nell’esempio più sopra dovrebbe essere di 50 pixel, non di 100 come nell’immagine che state vedendo.

Se “floattate” l’elemento a destra, allora il baco comparirà sul margine destro. Se lo floattate a sinistra, comparirà sull’eventuale margine sinistro.

Un workaround senza costi

Per fortuna il rimedio, scoperto da tempo, per questo baco è abbastanza semplice e relativamente indolore: trasformare il blocco (tipicamente un div) in un elemento inline attraverso la dichiarazione display: inline.

Il rimedio non dovrebbe avere effetti collaterali, né influenzare altri browser: infatti gli elementi floattati vengono automaticamente trasformati in elementi di blocco, perciò il display: inline non dovrebbe influenzare altri browser, ma essere semplicemente ignorato. Non serve dunque nasconderlo. In maniera altrettanto inspiegabile, IE/win ristabilisce la correttezza dei margini sul blocco dichiarato inline, anche se continua a trattarlo, giustamente, come un blocco.

Ecco dunque il precedente esempio con lo stile corretto per IE:

width: 100px;
height: 80px;
border: 1px solid #444;
background: #ccc;
float: left;
margin-left: 50px;
display: inline;

Non ne sapevo niente!...

Non ne sapevate nulla? Non siete i soli. Le ragioni potrebbero essere le seguenti:

1. Avete sempre usato il position per le impaginazioni. Non fate tanto i galletti, i position hanno altrettanti problemini, specie con contenitori multipli. Vi aspetto sulla riva del fiume…
2. Avete usato il float, ma con margini uguali a 0, in modo che non vi siate mai dovuti scontrare con il problema. Bella forza: così sono capaci tutti…
3. Avete usato il float e con margini diversi da zero, ma comunque talmente piccoli (alcuni pixel) da non rendere il problema significativo al netto di piccole differenze di resa fra i browser, che avete sempre trascurato. Perché siete dei trasandati, ecco perché!
4. Siete un imprenditore edile, e per voi CSS è una sigla che ha a che vedere con il fisco. Non preoccupatevi: i margini a voi non si raddoppieranno. Anzi, se ha a che fare davvero con il fisco, è possibile che si riducano. Purtroppo non è un baco.

Ma ora, niente scuse: il doppio margine non potrà più sfuggire alle force caudine del vostro debug. E potrete affrontare trionfanti qualunque layout urlando alle telecamere: “mai avuto doppi margini, in vita mia”!

Sezione: blog - Argomento: css-design |