Pubblicato da: fedeweb | settembre 22, 2008

Css ed IE6: 5 problemi tipici e le soluzioni per risolverli

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;
}
</span

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

Advertisements

Responses

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

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Categorie

%d blogger hanno fatto clic su Mi Piace per questo: