[cssdesign] explorer e margini doppi

Mar 9 Mar 2004 09:17:51 CET

Ciao a tutti...
volevo sapere se qualcuno avesse già riscontrato da qualche parte questo 
simpatico bug di explorer (probabilmente è un bug famosissimo e solo io 
non lo conosco :) su un elemento flottante sembra che explorer (5.0, 
5.5, 6.0) raddoppi i margini, ecco un esempio minimale:

<html>
<head>
</head>
<style>
#div1 {
	width:500px;
	border: 1px solid red;
	margin-left:100px;
}

#div2 {
	width:500px;
	border:1px solid green;
	margin-left:100px;
	float:left;
}
</style>
</head>
<body>
<div id="div1">&nbsp;</div>
<div id="div2">&nbsp;</div>
</body>
</html>

Su explorer il div2 ha un margine sinistro di 200px anziche' di 100.
Per risolverlo ho usato questo workaround: ripetere il margin-left 
preceduto da un doppio slash con il valore dimezzato:

<html>
<head>
</head>
<style>
#div1 {
	width:500px;
	border: 1px solid red;
	margin-left:100px;
}

#div2 {
	width:500px;
	border:1px solid green;
	margin-left:100px;
	//margin-left:50px;
	float:left;
}
</style>
</head>
<body>
<div id="div1">&nbsp;</div>
<div id="div2">&nbsp;</div>
</body>
</html>

Sembra che tutte le versioni di explorer interpretino correttamente una 
proprietà quando preceduta dal doppio slash, mentre altri browser che ho 
  testato (mozilla 1.4, mozilla 1.6, opera 6, opera 7, konqueror 3.2) 
semplicemente, come e' giusto, la ignorino.
Ovviamente questo sistema ha dei limiti, come faccio se voglio usare una 
dimensione dispari? 15px per esempio??? e mi preoccupa anche l'idea che 
possa uscire una nuova versione di explorer che risolva solo uno dei due 
bug e quindi ritrovarmi con tutti i margini sballati, qualcuno ha 
qualche soluzione migliore (che non sia usare il padding del contenitore 
:D )?

Ciao a tutti

--
Andrea Giardina

http://www.e-socrates.org
Liberi di insegnare, Liberi di imparare