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

Ti è piaciuto l'articolo? Se non vuoi rischiare di perderti i prossimi articoli tieniti aggiornato con i feed RSS o seguimi su twitter e facebook!

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