Čuden margin v IEju

V html sem vstavil nek kontejnerski objekt, vanj pa dva objekta, ki imata nastavljen float: left in margin-left: 10px;.

V Firefoxu dela vse bp; v IEju pa se pojavi težava, da izriše levi margin "levega elementa" (prvega div-a) dvojno: torej, če je nastavljen na 1px, ga izriše še enkrat širšega od desnega elementa, če 10px pa kar 20px.

Tech-demo

V čem bi lahko bila težava? (In rešitev, ki po možnosti ni določanje padding-left nosilnemu objektu).

Saj je koda, celo polinkal sem jo :-).

Pa vseeno:

<div style="width: 500px; background-color: red; clear: both; ">
	<div style="width: 200px; background: yellow; margin-left: 0px; float: left; ">Bla</div>
	<div style="width: 200px; background: yellow; margin-left: 0px;float: left;  ">Bu</div>
	<div style="clear: both; ">&nbsp;</div>
</div>

<div style="width: 500px; background: red; clear: both; ">
	<div style="width: 200px; background: yellow; margin-left: 1px; float: left; ">Bla</div>
	<div style="width: 200px; background: yellow; margin-left: 1px; float: left; ">Bu</div>
	<div style="clear: both; ">&nbsp;</div>
</div>

<div style="width: 500px; background: red; clear: both; ">
	<div style="width: 200px; background: yellow; margin-left: 10px; float: left; ">Bla</div>
	<div style="width: 200px; background: yellow; margin-left: 10px; float: left; ">Bu</div>
	<div style="clear: both; ">&nbsp;</div>
</div>

v IEju pa se pojavi težava, da izriše levi margin "levega elementa" (prvega div-a) dvojno

Verjetno je double float margin bug, star hrošč (mi je že nagajal;).

Tole preglej:
http://www.positioniseverything.net/explorer/doubled-margin.html

To je ena izmed možnosti...

Lahko pa narediš IEju lasten CSS in potem tega serviraš sam IEju z "conditional comments", ki jih pozna samo IE.

Ti dam kar iz mojega sourca primer:

<!--[if lte IE 6]>
<link rel='stylesheet' type='text/css' href='css/iehack.css'>
<![endif]-->

iehack (zaenkrat):

ul {
height:30px;
}

Preostali dizajn pa IE dopolnjuje z "skupnim" cssom.

Prednost pred !important? Predvsem večja preglednost, IMHO.

P.S. if lte IE 6 -> less or equal (lahko bi dal samo [if IE] ampak bodo morda v IE7 kaj čarali - forward compability)

Zgornjo težavo sem rešil z display: inline (hvala, veteran!). Serviranje različnih dokumentov se mi ne zdi priročno.

Tudi sicer želim take težave vedno rešit z dodatno deklaracijo ali selektorjem in čim manj ostalega smetenja.