5 soluzioni CSS per IE6
di: Francesco Improta 30 Giugno 2009
Nonostante Microsoft abbia sfornato ben due successori e nonostante, addirittura, campagne virali per scoraggiarne l'uso, IE6 è ancora tra noi, con i suoi problemi, le sue incongruenze e i mal di testa degli sviluppatori che intendono o sono costretti a garantire la compatibilità con un browser che può a ragione definirsi vetusto. In questo articolo, a beneficio soprattutto di chi si avvicina solo ora allo sviluppo di pagine web, abbiamo elencato 5 problemi noti del software di Microsoft e le relative soluzioni. Un breve vademecum da portare sotto l'ombrellone.
Box Model
Il bug più comune, più conosciuto e più mal digerito da ogni sviluppatore e designer. Immaginiamo di avere un box di questo tipo:
div#box {
width: 100px;
border: 2px solid black;
padding: 10px;
}
IE6 calcolerà la larghezza complessiva del box in 100px, mentre tutti i browser moderni la calcoleranno in 124px, poichè alla width di 100px sommiamo 10px di padding sinistro, 10px di padding destro e 4px totali di bordi laterali.
Per ovviare a questo bug utilizziamo dichiarazioni specifiche per i browser:
div#box {
width: 100px;
_width: 124px;
border: 2px solid black;
padding: 10px;
}
Scrivendo _width: 124px specifichiamo solo per il browser IE6 il valore di width che l'oggetto dovrà avere.
Il bug del doppio margine
Prendiamo come esempio il solito div#box visto in precedenza, ma questa volta applichiamo la dichiarazione float:right:
div#box {
float: right;
margin-right: 20px;
}
Il bug del margine doppio è causato da un errato calcolo dei margini da parte del browser IE quando l'elemento stesso è contemporaneamente dichiarato float. Di conseguenza il layout risulta compromesso. Quale soluzione? Il fix più comune consiste nell'aggiungere al div la seguente dichiarazione:
display:inline
Questo fix può però comportare nuovi problemi se, ad esempio, vorremmo applicare una dimensione fissa all'elemento cui è applicato, in quanto il valore inline non lo permette.
Centrare un elemento con i CSS
Centrare un elemento nel layout di una pagina web è una delle attività che viene svolta con maggiore frequenza. Per i neofiti del linguaggio CSS però rappresenta un problema, sopratutto se abituati a layout basati esclusivamente su tabelle.
Vediamo come ottenere l'effetto desiderato.
Creiamo il nostro div da centrare:
<body>
<div id="maincontent">DIV da centrare</div>
</body>
Ora lavoriamo con i CSS:
body {
background: #fff;
color: #000;
font: 0.7em/160% “Lucida Grande”, Verdana, sans-serif;
margin: 0;
padding: 0;
}
#maincontent {
background: #dded86;
width: 400px;
margin: 0 auto;
}
La proprietà margin: 0 auto indica che il l'elemento #maincontent avrà margini superiore ed inferiore pari a zero e margini laterali in automatico. Dichiarando quindi il valore di larghezza (width: 400px) il nostro div si posizionerà centralmente rispetto all'elemento padre, in questo caso l'intera pagina (body).
Per ottenere lo stesso funzionamento su IE bisognerà aggiungere la dichiarazione text-align: center; su body e text-aling: left; su #maincontent per ripristinare l'allineamento a sinistra del testo, come di default.
Guide CSS
Responsive Desing, la guidaProgettare siti da fruire su dispositivi diversi è imprescindibile... |
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |