Questo è solo un effetto di IE
Guardate attentamente il box di prova a sinistra. Osservate come il testo nella parte superiore non tocchi il float col bordo blu a sinistra. Il testo dovrebbe toccare il float, ma invece sembra avere 3 pixel di padding che lo distanziano dal float.
Ora osservate come nel paragrafo col bordo nero i 3px di spazio siano ancora li. Il limite sinistro del paragrafo si trova sopra il limite sinistro del box di prova (dietro il float), ma lo spazio è ancora evidente. Ciò significa che lo spazio extra è da collegarsi con qualcosa all'interno di <p>, non con <p> stesso.
Ma cosa c'è in <p>?
Solo testo, il che vuol dire 'box di riga', box 'anonimi' invisibili che contengono testo in riga, immagini, e tutto quello che viene dichiarato 'inline'.
In apparenza IE aggiunge 3px di spazio alla fine dei box di riga nel demo, se essi toccano il float. Ora date uno sguardo alla parte inferiore del box di prova. Osservate come lo spazio di 3px sia evidente anche se il box col bordo rosso (#jog-box) abbia un margine sinistro sufficiente a separarlo dal float. Questo significa che lo 'spazio' aggiunto viene applicato ai box di riga che sono adiacenti ad un float, non solo a quelli che toccano il float.
Ecco il trucchetto
Osservate come i 3px di spazio cessino alla stessa altezza verticale della fine del float (!). Ora è chiaro che è il float a causare i 3px di spazio aggiunti ai box di riga. Difatti, se il box blu fosse flottato a destra, lo spazio si troverebbe sul limite destro dei box di riga.
L'immagine a sinistra mostra lo 'spostamento del testo' [text-jog, N.d.T.] risultante dal float. È questo 'spostamento' il problema principale che causa un piccolo ma irritante difetto in layout altrimenti perfetti.
Un altro problema si può verificare in layout dalle dimensioni ben precise quando viene aggiunto
lo spazio extra di 3px. Immaginiamo di avere un float seguito da un div che ha un'immagine grande.
Sia il float che il div sono in un contenitore, e la larghezza del div combinata con il suo margine
è uguale alla larghezza del contenitore.
Quando il float adiacente produce i 3px di spazio sul grande box di riga all'interno del div che ha l'immagine, il div
non riesce più a stare nel contenitore! Questo succede perchè ci sono 3px in più nel div,
ma IE ha già stabilito le dimensioni del box e si rifiuta di ricalcolarle. Allora succede che questo div
non viene visualizzato fino a quando si trova sotto il livello verticale del float.
A quel punto i 3px extra non vengono applicati, e il div è ora dimensionato correttamente,
soprattutto perchè non vi è nessun float adiacente.
Senza conoscere il problema dei 3px, risolvere questo allineamento errato è quasi impossibile.
Ora si può risolvere!
Alla fine del 2003 si pensava che non vi fosse un modo sicuro per prevenire il bug, ma oggi sono orgoglioso di presentare un nuovo metodo per curare questo fastidio. Si tratta di dare al paragrafo una dimensione assegnata, sia 'width' che 'height', il che impedisce ad IE/win di aggiungere i 3px di spazio.
Sfortunatamente, questa dimensione innesca in IE il suo modello di float proprietario, spiegato in questa pagina. In effetti, se si applica la dimensione, il paragrafo sembra comportarsi proprio come un float, comparendo vicino al float vero e proprio, piuttosto che lasciare che il float lo circondi.
Di norma questo comportamento si evita mantenendo tutti i browser in accordo tra loro, ma grazie agli hack possiamo usarlo per eliminare lo spostamento di 3px e al contempo evitare che vi siano variazioni tra i browser. Come fare? Capite quello che segue.
L'Holly Hack
Dare al paragrafo una 'width' porta a difficoltà inaccettabili, ma 'height' non ha questi problemi. Il problema è come fare. Dare solo un'altezza al paragrafo non funzionerà, perchè ogni variazione nel contenuto, nella risoluzione o nella larghezza dello schermo causerà uno spazio vuoto nel paragrafo, o peggio una fuoriuscita del testo.
Ma, dato che IE ha proprio bisogno di questa altezza, gliela possiamo dare usando l'hack di Tan. "Cos'è?", direte voi. Bè, IE/win ha un altro comportamento errato che lo porta ad allargare un box (di solito in verticale) per mantenere il contenuto all'interno del box, anche quando il box viene dichiarato più corto!
Un tale comportamento non-standard può mandare a monte layout avanzati basati sul float, ma in questo caso è davvero utile. Ci siete già arrivati? Comunque, ecco qui: date al paragrafo una 'height' piccolissima, come 'height: 1%'. Vedete che succede ora? IE vede questa altezza, e mette il paragrafo vicino al float, eliminando il salto di 3px. E, poichè il contenuto è di sicuro più alto dell'1%, il box viene reso più alto per farcelo stare! Un bug mandato per ucciderne un altro. Woohoo! (gloria per Holly Bergevin)
Dettagli
Ricordate che solo IE/win lo vedrà e, in aggiunta, ad IE viene impedito di applicare il margine sinistro al paragrafo. Questo margine sinistro di norma si trova dietro il float (come deve essere), ma al box del paragrafo, su IE, viene impedito di fare lo stesso proprio a causa di quella dimensione (sbagliata). Come se non fosse abbastanza, il margine del paragrafo sembra che abbia 3px aggiunti da IE, così, se il margine è largo come il float o più largo del float, questa variazione di 3px farà in modo che IE mostri un buco più largo tra il float e il paragrafo.
Nota speciale: Questa soluzione dovrebbe essere usata su un elemento contenitore che racchiude tutto il contenuto che segue il float, non sui singoli elementi. Applicare la soluzione su un unico elemento semplifica l'hack ed evita possibili problemi.
Piuttosto che affrontare questa follia, applicate solo lo spazio orizzontale desiderato tra i due elementi usando un margine destro sul float invece che il margine sinistro del paragrafo. Ecco come potrebbe apparire il codice:
#floatbox {
float: left;
width: 100px;
}
p {
margin-left: 110px;
}
/* Nasconde da IE5-mac. Solo IE-win lo vede. \*/
* html #floatbox {
margin-right: 10px;
}
* html p {
height: 1%;
margin-left: 0;
}
/* Finisce di nascondere da IE5/mac */
Due cose: quando si invoca il modello float di IE, il float ha di colpo un margine di 3px sul lato del paragrafo, il che si può eliminare all'interno dell'hack di Tan sia con un margine negativo di 3px sia riducendo il margine del float di 3px.
Inoltre, come detto prima, a IE5/mac deve essere impedito di vedere gli hack, e così dobbiamo usare l'hack per Mac (i commenti speciali). Si veda questo demo per un esempio di questo metodo, e si osservi il sorgente per ulteriori ragguagli.
Nota speciale: Se il float è un'immagine (o presumibilmente altro contenuto generato), lo spazio extra di 3px NON viene applicato da IE. Purtroppo IE5.x/win non segue questo comportamento, ma nel caso di un'immagine flottata applica 3px di margine al lato destro e sinistro dell'immagine. Poichè IE6 non lo fa, abbiamo qui un altra variazione tra le varie versioni di Explorer. Proprio quello di cui avevamo bisogno.
A differenza dei 3px di spazio per i box di riga, questi maledetti margini possono essere eliminati con l'hack di Tan, così:
* html #floated-image {
margin: 0 -3px; ma\rgin: 0;
}
Usare '* html' prima dell'elemento a cui è destinata la regola impedisce agli altri brower di riconoscerlo come un vero selettore. IE pensa che vi sia un elemento contenitore intorno ad 'html' e così rispetta tutte le regole all'interno di questo blocco di dichiarazioni. Il secondo 'ma\rgin' è ignorato da IE5.x/win, e così IE6 e IE5/mac ottengono i valori di margine non filtrati. Per ulteriori informazioni sull'hack di Tan si veda questa pagina.
Conclusione
IE da ancora un bel mal di testa, ma personalmente credevo che questo problema non sarebbe mai stato risolto. Sono felice di vedere che non tutto è perduto.
Ultime notizie!
Nuove info (metà del 2004) scoperte in relazione all'uso di dimensioni su un box. Andate su questa pagina per le sporche news.
Grazie Ellen Herzfeld per i test sulle varie versioni di Internet Explorer.
Holly e John
Contatta Holly
Contatta John
©positioniseverything
Ultimo aggiornamento: 25 agosto 2004
Creato il 18 gennaio 2003