Margini negativi (layout CSS): risolvere il “Float drop bug” di Internet Explorer

A parte i fanboy di Firefox, se c’è chi ha davvero il diritto di odiare Internet Explorer, questo è lo sviluppatore web, che ogni giorno deve riadattare i suoi fogli di stile a causa dei tanti bug di IE con i CSS.

Non che io sia uno sviluppatore, ma ultimamente sto lavorando al futuro tema di Technoburger (è ancora una bozza), per il quale ho scelto un layout con margini negativi… e mi sono imbattuto nel “Float Drop Bug” di IE.

Correzione del “Float drop bug“

Per correggere il float drop bug in un layout CSS a margini negativi, basta aggiungere, nel foglio di stile, una semplice regola all’elemento #wrapper:

overflow: hidden;

#wrapper alla fine dovrebbe apparire così (il valore negativo del margin left è relativo al caso particolare del mio tema):

#wrapper {
float: left; width: 100%;
margin-left: -384px;
overflow: hidden; /* fixing IE's "Float Drop" bug */
}

Se vuoi saperne di più sul layout a margini negativi e sul float drop bug, continua a leggere!

Spiegazioni

Vantaggi del layout con margini negativi

Il layout a margini negativi consente di posizionare il menu di navigazione a destra dei contenuti (rendendolo “float”), inserendo, però, i contenuti prima della navigazione nel codice XHTML. Questo dovrebbe essere un vantaggio, sia per i disabili che fanno uso di lettori di schermo, che per i motori di ricerca… almeno da quanto si legge “in giro”. Su una cosa sono sicuro: l’ho testato su diversi browser, ed è risultato essere uno dei layout cross-browser più robusti.

Come funziona? Si imposta un margine negativo al div dei contenuti, pari alla larghezza della sidebar. In questo modo, rendendo la sidebar flottante, si riesce a portarla a destra dei contenuti senza farla andare a capo, nonostante essa si trovi più in basso nel codice sorgente. Per spiegazioni più dettagliate ti rimando all’articolo “Layout con margini negativi“ di HTML.it.

Come unico svantaggio, costringe all’introduzione di un div “wrapper” che circondi il div dei contenuti: questo div non è semantico, in quanto viene introdotto per motivi puramente presentazionali.

Questo svantaggio potrebbe essere risolto scegliendo un layout con posizionamento assoluto, che presenta tutti i vantaggi del layout a margini negativi (anzi, rende totalmente indipendente l’ordine degli elementi nel codice dall’ordine di presentazione), senza però costringere all’introduzione di div contenitori inutli. Ad un prezzo però: bisogna rinunciare al footer.

Il float drop bug di Internet Explorer

Il float drop bug di Internet Explorer si presenta al verificarsi di due condizioni:

1. Un elemento contenitore (incluso il body) è affiancato da un elemento float;
2. L’elemento contenitore non è largo abbastanza da contenere sia il testo (o un elemento come un’immagine) contenuto al suo interno, sia l’elemento float affiancato da questo testo.

In questo caso, piuttosto che far scorrere l’elemento float sopra all’oggetto troppo largo, nascondendolo alla vista, Internet Explorer 5 e 6 fanno andare l’elemento float a capo, sotto, cioè, l’elemento contenitore. Puoi ben capire come questo bug possa rovinare un layout, qualora l’elemento contenitore fosse il div contenente i contenuti principali, mentre l’elemento float la colonna di navigazione (sidebar).

Vediamo un esempio: l’elemento contenitore è quello con sfondo verde, il float è quello in viola, mentre l’elemento che provoca il bug è la stringa di testo (volutamente senza spazi) evidenziata in rosso, che va “oltre il limite” (limite rappresentato dalla posizione dove dovrebbe stare l’elemento float).

Normalmente, i browser che non sono affetti da questo bug dovrebbero nascondere l’elemento troppo largo sotto all’elemento float, che non va a capo. Ecco, ad esempio, come si comporta Firefox con lo stesso layout:

Il bug non affligge Internet Explorer 7 e successivi, e si fa particolarmente sentire su layout fluidi (quei layout che si adattano alla larghezza della finestra del browser). Potrebbe però essere un problema anche qualora l’utente ingrandisse la dimensione dei caratteri del browser.

Articoli simili:

• Concorrenza sleale di IE: l’Unione Europea accusa di nuovo Microsoft
• Siamo sicuri che Google restituisca sempre i risultati migliori?
• Internet Explorer 6 e 7 su Eee PC. Testare i siti web su EXPLORER? È meglio LINUX! :-P

Etichette: Float Drop Bug, Internet Exploder, Internet Explorer, Layout CSS, Margini negativi, Microsoft

Autore: Andrea Romagnoli
Questo articolo è stato pubblicato il Thursday, July 24th, 2008 alle 3:22 am sotto la categoria CSS. Puoi seguire i commenti di questo articolo tramite il feed RSS 2.0. Puoi lasciare un commento, o mandare un trackback dal tuo sito.

Se questo articolo ti è stato utile, segnalalo sul tuo sito! Puoi inoltre seguire comodamente gli aggiornamenti di Techlog tramite il feed RSS; infine puoi lasciare un commento se ti serve aiuto (o anche solo per un saluto); anche qui non serve registrarsi (sono abilitati anche i commenti anonimi; l'E-Mail serve, eventualmente, per ricevere le notifiche delle nuove risposte). ;-)