Comportamento errato di elementi posizionati in maniera assoluta in IE6

Spesso, durante i lavori di realizzazione di templates con CSS e (x)HTML, mi sono trovato difronte a delle difficoltà quando ho dovuto necessariamente avere uno o più elementi, in una parte della pagina, posizionati in maniera assoluta. Quanto meno ce lo aspettiamo... le cose più semplici sono le più complicate e sono quelle che fanno perdere molto più tempo, in fase di debug, rispetto ad un intero sito web.

Fino a che si lavora con browser standard, tutto è bene quel che finisce bene ma... quando si deve aprire anche il browser Internet Explorer... cominciano a drizzarsi i capelli per come potrebbe essere interpretata una dichiarazione CSS. Motivo per cui, molte volte, si vogliono abbandonare i CSS per la presentazione del layout e si inserisce qualche tabella, qua e là, nella pagina. Anzichè farmi tentare anche io... desisto e cerco di capire quale possa essere il problema.

Ricordo di aver fatto un lavoro, tempo fa, ed in una pagina ero costretto ad inserire elementi con il posizionamento assoluto; manco a dirlo... tale pagina aveva molte differenze di visualizzazione tra IE6, IE7, Opera e Firefox.

Gli elementi con posizione assoluta sono rimossi dal flusso della pagina

Preso dal "panico" per come IE6 interpretava la dichiarazione CSS inserita, mi sono messo a spulciare manuali online, manuali cartacei e l'unica cose che avevano in comune, tra le moltissime, era la seguente dichiarazione:

Gli elementi con posizione assoluta sono rimossi dal flusso della pagina e non hanno nessun effetto sugli elementi che li circondano.

Facile a dirsi!

Pensandoci bene, però, nemmeno gli elementi circostanti dovrebbero evere alcun effetto sugli elementi con posizionamento assoluto. Come abbiamo sempre imparato: si posiziona un elemento in maniera assoluta quando al suo genitore è stata assegnata la proprietà position:relative in modo tale che l'elemento "figlio" è in relazione al suo genitore, appunto, e non rispetto all'intero viewport.

Addentriamoci nell'articolo vero e proprio. Il primo esempio mette in evidenza la differenza tra Firefox 2.0.016, Opera 9.21, Safari per Windows ed infine IE6 e IE7. E' stato creato semplicemente un elemento contenitore il quale contiene un elemento con position:absolute ed un box, successivo a quello assoluto, con un margine di 10 px superiore all'altezza del primo oggetto. Di seguito il codice:

#container{
margin:auto;     
border:1px solid green;    
width:400px;     
position:relative; 
} 

div.assoluto{   
position:absolute;     
top:0;     
left:0;    
background:#09d; 
}  
div.box{     
margin:130px 0 0 0;    
background:#730000;
}  

Il codice HTML è il seguente:

<div id="container"> 
<div class="assoluto">
DIV con posizionamento assoluto
</div> 
<div class="box">
Secondo DIV con nessun posizionamento assegnato
</div> 
</div> 

Come scritto più su, in Firefox non ci sono problemi in quanto viene visualizzato correttamente sia il primo elemento che il secondo, distaccati di 10px (dati dal margin-top del secondo box. In IE6 e IE7 manca qualcosa: si vede solo il primo elemento con position:absolute. Le due screen di seguito:

errore in IE6 del posizionamento assoluto
Errore in IE6 del posizionamento assoluto
errore in IE7 del posizionamento assoluto
Errore in IE7 del posizionamento assoluto

In Opera e Safari per Windows si ha la stessa resa di Firefox.

Salta subito agli occhi che IE6 e IE7 hanno problemi nel visualizzare il primo esempio. Il div.box che avrebbe dovuto seguire l'elemento con position:absolute è completamente scomparso in entrambi i browser IE6 e IE7.

Il div.box scomparso in IE

Se, apparentemente, sembra che il div.box, successivo al div assoluto, sia scomparso, questo non è del tutto vero. Provando a ridurre la larghezza dell'elemento assoluto, vedremo il secondo div apparire sotto quello assoluto. Si riduca la dimensione del primo elemento, nel codice css, in questo modo:

div.assoluto{    
position:absolute;    
top:0;     
left:0;    
background:#09d;   
width:300px;
} 

Il risultato lo possiamo vedere nel secondo esempio. Se si sta utilizzando Firefox, non si è notato nulla, se non una larghezza inferiore del primo elemento; se si apre la pagina con IE6 o IE7 si vede una pagina simile alle screen riportate di seguito:

errore in IE6 del posizionamento assoluto
Errore in IE6 del posizionamento assoluto
errore in IE7 del posizionamento assoluto
Errore in IE7 del posizionamento assoluto

Come mai un comportamento del genere? Verrebbe da pensare che il margine superiore di un contenuto che segue un elemento con position:absolute, venga ignorato in IE.

Abbiamo letto molto o sentito parlare della questione "haslayout. In questo caso non si tratta di, appunto, haslayout in IE in quanto l'elemento "ha layout" per via della larghezza assegnata. Si dovrebbe provare a rendere "flottante" l'elemento successivo a quello assoluto. Il codice è il seguente:

div.box{     
margin:130px 0 0 0;    
width:400px;    
height:120px;    
background:#730000;    
float:left;
}

Il terzo esempio pare che abbia fatto qualcosa. Attenzione! pare solo per IE7, che fa vedere in maniera corretta la pagina. La screen è il seguente:

errore in IE7 del posizionamento assoluto
Errore in IE7 del posizionamento assoluto

In IE6, invece, ha mostrato il secondo elemento statico ma ha "nascosto" il primo, vale a dire quello con position:absolute. La screen lo dimostra:

errore in IE6 del posizionamento assoluto
Errore in IE6 del posizionamento assoluto

Neanche questa soluzione sembra adatta se c'è disparità di visualizzazione tra IE7 e IE6. per prima cosa si dovrebbe eliminare il float:left; aggiunto al div.box. Siccome non è il massimo arrendersi dinanzi a browser tipo IE6 e IE7, anche se spesso fanno cadere le braccia, si potrebbe tentare ad invertire gli elementi nel codice html, in quanto nel codice css pare che non ci sia nient'altro da agiungere o eliminare. Il codice html diventa quindi:

<div id="container"> 
  <div class="box">
   Secondo DIV con nessun posizionamento assegnato
 </div> 
   <div class="assoluto">DIV con posizionamento assoluto
 </div>    
</div> 

Il risultato del quarto esempio, finalmente, rende omogenea la visualizzazione anche con i browser IE.

Le "stranezze" potrebbero non finire qui... Se, infatti, si aggiunge float:left; al blocco successivo a quello assoluto, mantenendo l'ultimo codice html, in IE6 avviene l'ennesima cosa strana che possiamo vedere nella seguente screenshot:

errore in IE6 del posizionamento assoluto
Errore in IE6 del posizionamento assoluto

Dopo aver trovato la soluzione, scambiando gli elementi nel codice html, adesso che si è aggiunta la dichiarazione float:left; all'elemento seguente a quello assoluto, il problema riappare e scompare il primo blocco! Ovviamente non si arriva alla soluzione scambiando ancora la disposizione degli elementi html. Non essendoci molti argomenti in merito a questo problema, si provi ad assegnare clear:both all'elemento con posizione assoluta. Il suo codice css diventa:

div.assoluto{     
position:absolute;    
top:0;     
left:0;     
width:400px;     
height:120px;    
background:#09d;    
clear:both; 
} 

Il sesto esempio rende corretta la visualizzazione in entrambi i browser IE.

Gli esempi riportati possono sembrare un pò controversi ma sono serviti per dimostrare la piena efficacia di strani bug che affliggono IE, in una maniera semplice. Adesso che abbiamo conosciuto anche questo ennesimo comportamento, sappiamo come comportarci. Le cose a cui prestare attenzione sono la scomparsa di elementi con posizione assoluta e la scomparsa di elementi successivi a quelli assoluti. La soluzione è quella di spostare, nel codice html, la posizione dell'elemento assoluto dopo quello statico e di aggiungere clear:both.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati