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..

L'articolo ti è stato utile? se vuoi ringraziarmi offrimi un caffè, o una pizza se vuoi esagerare!

E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.Se non sai cosa sono, guarda questo video. Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

Quando Posso Usare……

Sappiamo tutti, che realizzare un sito internet non è mai una cosa semplice, a causa dei differenti standard usati dai browser. E ogni volta che...

20 Trucchi CSS Per il Tuo Sito

Oggi vi voglio segnalare un articolo molto interessante che riguarda l'utilizzo degli stili CSS. Come molti web designer sapranno, i fogli di stile...

Tecniche CSS innovative e sperimentali che non avevate mai visto

Oggi vediamo alcune tecniche css innovative, che non si vedono spesso nei siti web, che probabilmente mai avrete immaginato di poter...