Sitter här med ett enormt irriterande problem som jag inte lyckas lösa. Jag har följande kod.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>fel</title>
<style type="text/css">
body { background-color: #333;
font-family: Verdana, Helvetica;
font-size: 11px;}
#footer { background: url(images/foot.png) no-repeat;
height: 10px;
background-position: bottom center;
clear: both;}
#container { background-color: #fff;
width: 702px;
margin: 0 auto;}
#main { width: 490px; [b]margin-left: 0;[/b] background-color: #ccc; float: left;}
#rail { width: 180px; margin-left: 10px; background-color: #aaa; float: left;}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="main">Lorem ipsum...</div>
<div id="rail"><div class="calendar">foo</div></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Med ovanstående så är allt frid och fröjd. Resultatet ser likadant ut i såväl firefox, opera som IE (översta raden i den bifogade bilden).
Men om jag ändrar det fetmarkerade ovan till margin-left: 10px; så får IE för sig att lägga till 20px marginal istället (rad 3 i bilden), medans firefox och opera lägger till 10px marginal (rad 2). Varför blir det så? Och framförallt, hur löser jag det?
