Fw

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

2 Commenti

1. • Più di 500 pennelli per creare delle texture mozzafiato « Fedeweb
   • 25 settembre 2008

   […] 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 […]

   Rispondi
2. 

   • sexe chatte en furie
   • 1 giugno 2014

   Bon, je n’ai pas fini de lire cependant je passe dans la soirée

   Rispondi