Sappiamo tutti che quando progettiamo un sito web, prima o poi ci tocca testarlo con internet explorer 6 e cominciare a pregare….
Andiamo a vedere alcuni dei problemi più frequenti che possiamo incontrare con internet explorer e come poterli risolvere.
1. Valore doppio nei margini quando si usa la proprietà float nei div
Molto spesso capita di voler “affiancare” 2 div, magari uno che contiene del testo e l’altro delle immagini. Se impostiamo un margine a volte il valore risulta doppio in IE 6.
#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px; }
Soluzione
Aggiungete la proprietà display:inline e tutto si sistemerà.
#content {
float: left;
width: 500px;
padding: 10px 15px;
margin-left: 20px;
display:inline;
}
2. Le proprietà di margin e padding compromettono le dimensioni e la
posizione dei contenuti
Quando si vuole specificare la larghezza per ogni div non bisogna specificare le proprietà di padding e margin.
#main-div{
width: 150px;
border: 5px;
padding: 20px;
}
Soluzione
Create un div all’interno del precedente e impostate qui il margin e il padding, in questo modo.
#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}
3. La trasparenza delle PNG non mantenute
Questo è uno dei problemi più frequenti, cioè le immagini salvate in PNG, con sfondo trasparente non vengono visualizzate correttamente su internet explorer 6.
Soluzione
Impostate questa proprietà:
.trans {
background-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”yourPNG.png”, sizingMethod=”crop”);
}
Ci sono anche dei script che risolvono il problema. Io vi consiglio questo.
4. Se hai 2 o 3 colonne messe una vicino all’altra tramite la proprietà float a
volte l’ultima colonna va sotto le altre
Altro problema che a me è capitato qualche volta, dove l’ultima colonna, invece di stare di fianco alle altre va sotto.
#content {
float:left;
width: 300px;
margin-right: 10px;
display:inline;
}
#sidebar {
float:left;
width: 100px;
display:inline;
}
Soluzione
Mettete la proprietà overflow:hidden in tutti i div.
#content {
float:left;
width: 300px;
margin-right: 10px;
display:inline;
overflow:hidden;
}
#sidebar {
float:left;
width: 100px;
display:inline;
overflow:hidden;
}
5. Il “pallino” delle liste non è allineato con il testo
Questo succede quando abbiamo un top padding negli elementi della lista (<li>..)
Soluzione
Mettete un top margin, anzichè un top padding..
[...] per creare delle texture mozzafiato Questa settimana è dedicata al web design, con suggerimenti su come avere dei siti web a prova di Internet Explorer 6, i migliori temi per wordpress, e un [...]