pevere web css design accessibilità e usabilità 

IE 6, il bug dei magini con il float

Il pretesto per questo articolo mi arriva proprio dalla grafica di questo mio sito.
Fino ad ora non ho mai trattato l’argomento bug, ma realizzando la grafica del sito mi sono imbattuto proprio in un bug.... e indovinate su quale browser?....... si si Internet Explorer 6. Ma veniamo ai fatti.

Per realizzare la grafica del sito, ho usato, almeno per la parte interna, due colonne, una per il le liste dei contenuti ed una per i testi.
Detto questo vediamo il codice che ho usato per realizzare le due colonne del contenuto:

#sinistra {
	width: 	220px;
	float: left;
	margin: 100px 0 0 220px;
	text-align: right;
}
#destra {
	width: 	400px;
	margin: 100px 0 0 500px;
}

Questo codice, dispone una colonna a sinistra, spostata rispetto all’elemento che la contiene di 220px e una a destra alla stessa altezza grazie alla definizione di float: left. Il codice sopra esposto funziona egregiamente con Fire Fox, Opera, Safari, IE 5.5 e IE 5, ma non con IE 6.

Quando mettiamo una colonna con un margine left o right positivo e una definizione di float, la misura di margine viene raddoppiata. Nel caso specifico la colonna di sinistra non si posizionava a 2200px dal margine del contenitore, ma a 440px.

Bene, che fare? C’è una soluzione a tutto, e in questo caso, la soluzione è inserire un display inline nella definizione della colonna sinistra. Non è molto logico ed è assolutamente ininfluente per tutti gli altri browser, ma per IE 6 questa ulteriore definizione risolve i problemi.
Il codice quindi diventa:

 #sinistra {
	width: 	220px;
	float: left;
	display: inline;
	margin: 100px 0 0 220px;
	text-align: right;
}

E tutto funziona!


Commenti all'articolo

mi piace l'articolo Data e ora del commento: 13/06/2007 08:09 paolo Caro Paolo,
grazie per il prezioso suggerimento. Finalmente ho risolto il problema di IE6 che mi portavo dietro da un po' di tempo. Ora devo risolvere anche la compatibilità dei valori negativi sempre sul "margin" e sempre con IE6.

anora grazie

Enzo Data e ora del commento: 16/06/2008 13:53 Enzo

Aggiungi il Tuo Commento:





Inviando questa risposta dichiaro di aver letto ed approvato le condizioni di utilizzo di questo sito web.

(*) = campo obbligatorio.

Condizioni di Utilizzo

1 - Tutte le risposte inviate a questo sito saranno sottoposte a moderazione manuale da parte dell'amministratore al fine di evitare il fenomeno detto "SPAM".

2 - Tutti i dati inseriti nel modulo di risposta verranno pubblicati in questa pagina ad eccezione dell'e-mail. Tale informazione viene richiesta ed archiviata dagli amministratori al fine di scoraggiare un utilizzo non consono del blog.

3 - Non utilizzare le risposte per pubblicizzare il tuo sito web. Tale tentativo verrà cancellato dall'amministratore. In ogni caso ai link inseriti nelle risposte viene applicato il "nofollow" per cui non ti portano vantaggi.