ateapick

Posizionamento assoluto e relativo con IE6

Scritto da Alessandro, il giorno 12 gennaio 09

Il posizionamento con i CSS

Attraverso la proprietà position: è possibile controllare in maniera piuttosto precisa il posizionamento all’interno di una pagina web di un elemento di tipo block-level.

In particolare il posizionamento relativo – position: relative – usato in combinazione con una o più proprietà di offset (top:, right:, bottom:, left:) consente di definire lo scostamento dell’elemento rispetto alla posizione originale assunta dall’elemento stesso all’interno del normale flusso di rendering della pagina. Utilizzato ad esempio in combinazione con le proprietà top: 10px e left: 10px, l’elemento verrà disegnato spostato di 10px in alto e a sinistra rispetto alla posizione nella quale si sarebbe dovuto trovare.

Il posizionamento assoluto – position: absolute – consente invece di collocare esattamente un elemento in un qualsiasi punto della pagina, indipendentemente dalla presenza degli altri elementi. Utilizzato ad esempio in combinazione con le proprietà top: 0px e left: 0px, l’elemento verrà disegnato nell’angolo superiore sinistro della pagina.

È importante tener conto che un elemento posizionato in modo assoluto “esce” dal normale flusso e gli altri elementi della pagina si comportano come se l’elemento stesso non esistesse.

Posizionamento assoluto all’interno di un posizionamento relativo

Ciò che si rivela estremamente utile nella realizzazione di template HTML di una certà complessità è l’utilizzo combinato delle due proprietà, in particolare inserendo un elemento posizionato in maniera assoluta all’interno di un altro posizionato in maniera relativa:

    <div style="position: relative">
        <div style="position: absolute"></div>
    </div>

Così facendo si re-inizializzano le coordinate 0,0 dell’elemento absolute rispetto all’angolo superiore sinistro dell’elemento padre, invece che rispetto all’intera pagina. Quindi dando le proprietà top: 0px e left: 0px l’elemento absolute verrà disegnato nell’angolo superiore sinistro dell’elemento relative che lo contiene.

Internet Explorer 6

Inutile sottolineare come IE6 interpreti in modo del tutto arbitrario questa impaginazione e necessiti di un apposito workaround. Per tutti coloro che pensano che IE6 sia ormai storia, l’ultimo rilevazione di Market Share del Dicembre 2008 lo posiziona al secondo posto tra i browser dopo il fratello maggiore IE7 e subito prima di Firefox 3, con ancora il 20% di quota di installato.

Il problema principale dell’utilizzo di questa tecnica risiede nel fatto che IE6 non sempre inizia a calcolare le coordinate dell’elemento posizionato in maniera assoluta dal nuovo “0,0” originato dall’elemento contenitore. Lo fa solo a volte!

IE6 infatti contiene una proprietà nascosta chiamata “hasLayout” sulla quale non è possibile intervenire attraverso i fogli di stile. É una variabile nascosta che che il “browser dei miracoli” utilizza per tenere traccia di ogni elemento della pagina. Trovate maggiori informazioni qui.

Per risolvere il nostro problema invece è possibile dare al nostro elemento un layout assegnandogli degli attributi come larghezza, altezza, floating o altro ancora. Spesso però, come sarà sicuramente capitato a molti, è impossibile assegnare detti attributi agli elementi senza inficiare il corretto layout della pagina.

Fortunatamente ci viene incontro un fix specifico per IE6:

    <!--[if IE]><style>
    .ie_layout {
      height: 0;
      he\ight: auto;
      zoom: 1;
    }
    </style><![endif]-->

É sufficiente definire nel foglio di stile la classe .ie_layout secondo la sintassi sopra riportata e assegnarla all’elemento padre, ovvero quello posizionato in maniera assoluta. Il commento condizionale [if IE] è un comando proprietario di Internet Explorer che fa si che questa classe e questi attributi siano interpretati solo da quest’ultimo.

Come personale linea di sviluppo, cerco sempre di non utilizzare i filtri nei CSS per evitare di introdurre istruzioni non richieste e di sporcare il codice. Preferisco piuttosto utilizzare più codice HTML distribuendo gli attributi su vari elementi indentati (ad esempio per ovviare al noto problema del Box Model di IE).

Tuttavia in alcuni casi limite come questo, sono l’unica risorsa per riuscire ad ovviare a tutti quei problemi introdotti da alcuni browser ed in modo particolare dal mai troppo denigrato Internet Explorer 6.