Quando fixare lo z-index con il posizionamento relativo è come riparare un’ automobile con una chiave inglese rotta
Succede sempre.
C’è sempre qualche browser che non è d’accordo.
In questi giorni mi sono offerta di fare il restyling del forum di una gilda di World of Warcraft ed è stata veramente una bella impresa; un po’ perché gli hosting che offrono servizi alle gilde per avere un set di servizi decenti propongono delle tariffe che per una gilda startup sono troppo alte e trovarne una economica ha richiesto una intera giornata di ricerche; un po’ perché l’hosting generalmente dà solo la possibilità di modificare il css di alcuni template già preinstallati sul CMS che offre; un po’ perché quando non sei tu a mettere i div in una pagina le cose sono sempre un po’ più complicate di quello che sembrano (e ogni tanto sei costretto/a a vedere degli ibridi div/table da far accapponare la pelle, per non parlare del codice di stile inline).
C’è da fare una premessa: il layout a cui mi riferisco consta sostanzialmente di una tabella a tre colonne che contiene a sua volta i div per i vari moduli che vengono mostrati all’interno del CMS e per il corpo dei posts. I browser con cui ho provato le visualizzazioni sono Chrome 10, Firefox 4, Internet Explorer 8.
I problemi sono iniziati quando ho deciso di racchiudere la tabella in un grande quadrato con i bordi arrotondati utilizzando la direttiva del CSS3:
border-radius
Chiaramente i bordi apparivano arrotondati solo su Chrome e Firefox ma non su IE.
Siccome raramente decido di mettermi nei pasticci con le mie mani usando direttive che so essere poco digeribili per qualche browser, decido di fare qualche ricerca in rete e scopro che in realtà per assicurare una corretta intercompatibilità di visualizzazione tra Internet Explorer, Firefox e browser che si basano su web kit è necessario dichiarare una tripletta di direttive:
-moz-border-radius
-webkit-border-radius
border-radius
Siccome poi c’è sempre qualcuno che ha più bisogno di premure degli altri, nel caso che abbiate a che fare con IE c’è anche bisogno di procurarsi il file ie-css3.htc e di renderlo disponibile sul proprio sito per poi includerlo nel css proprio sotto la direttiva border-radius:
behavior: url(ie-css3.htc);
E qui bisogna cominciare a fare attenzione perchè il path a cui si riferisce “behavior” non è relativo alla directory corrente ma alla root del sito.
Refresh della pagina: il fantastico box con i bordi arrotondati invece di comportarsi come uno sfondo ricopre letteralmente corpo del testo e moduli come una tovaglia. Paura e delirio: sento odore di z-index.
E infatti devo proprio ricorrere allo z-index e incappo nel primo baco di IE: lo z-index viene considerato adeguatamente solo se si riferisce ad un elemento con un posizionamento relativo ad un altro elemento contenitore per il quale sia già stato specificato uno z-index.
Conoscere il problema è senza dubbio meglio che brancolare nel buio: non mi perdo d’animo e assegno alla tabella il posizionamento relativo e lo z-index, avendo cura di assegnare agli che contiene lo z-index adeguato.
Refresh della pagina: ad una prima occhiata sembra essere tutto a posto. Ed ecco che si presenta il secondo baco: la necessità di far comparire un announcement dei messaggi privati in altro a destra della pagina ha spinto l’autore del CMS a dare al div che racchiude il messaggio un posizionamento assoluto; ma ora…assoluto rispetto a cosa? Assoluto rispetto all’elemento che lo contiene visto che per esigenze particolati improvvisamente questo ha assunto un posizionamento relativo…il che significa che l’elemento è totalmente fuori posto e che l’unico modo per riposizionarlo in modo assoluto sì, ma rispetto al viewport, è dargli un posizionamento fixed.
Il peggio, nel peggio, è quando non puoi mettere mano al codice e gli stili degli elementi per giunta sono “inline”: mentre già mi disperavo ed immaginavo interminabili botta e risposta a suon di ticket con l’hosting apprendo con grande sorpresa che in realtà il problema si può aggirare aggiungendo alle direttive che si vogliono sovrascrivere il suffisso
!important
Quindi ad esempio se capita di incappare in un div come quello che segue:
<div class=”mydiv” style=”position:absolute;”></div>
Si può fare overriding della direttiva in questo modo:
mydiv {
position: fixed !important;
}
Decisamente la life-saver discovery della giornata!
Bibliografia
Category: blog
Back