JürgenB: margin und float

Hallo alle,

ich möchte einem div etwas Abstand vom linken Rand geben, das mache ich mit margin-left. Zusätzlich gebe ich dem div die Eigenschaft float:left mit:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">  
<title>Test</title>  
<style type="text/css">  
 #nav    { margin-left:120px;width:620px;float:left; }  
 #cont   { margin-left:120px;width:620px;padding-top:20px;padding-bottom:20px;clear:both }  
</style>  
</head>  
<body>  
<div id="nav">  
 link link link link  
</div>  
<div id="cont">  
 <p>Text</p><p>Text</p>  
</div>  
</body>  
</html>  

Im Firefox klappt das auch, im IE hat aber das Hinzufügen von float:left zum css zur Folge, dass der Rand doppelt so groß angezeigt wird. Im obigen Beispiel haben im Firefox beide DIVs den gleichen Abstand zum linken Rand, im IE ist beim 1. div der Abstand doppelt so groß. Ohne float:left stimmt alles. Kennt jemand das Problem und weiß Abhilfe?

Gruß, Jürgen

  1. Im Firefox klappt das auch, im IE hat aber das Hinzufügen von float:left zum css zur Folge, dass der Rand doppelt so groß angezeigt wird. Im obigen Beispiel haben im Firefox beide DIVs den gleichen Abstand zum linken Rand, im IE ist beim 1. div der Abstand doppelt so groß. Ohne float:left stimmt alles. Kennt jemand das Problem und weiß Abhilfe?

    Ich antworte einfach mal ins Blaue hinein. Gib Deinem 1.Div mal auch einen padding-Wert. Vielleicht hilfts ja

    Gruß,
    Onkel Schnitzel

    1. Hallo Onkel Schnitzel,

      ... Gib Deinem 1.Div mal auch einen padding-Wert. Vielleicht hilfts ja

      padding war auch drin. Es hat aber nichts am Problem geändert, deshalb habe ich es im Beispiel entfernt.

      Gruß, Jürgen

  2. Hi,

    das ist ein bekannter Bug.
    Hilfe gibt es unter http://positioniseverything.net/explorer/doubled-margin.html.

    MfG Hopsel

    --
    "It's amazing I won. I was running against peace, prosperity, and incumbency."
    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
    1. Hallo Hopsel,

      das ist ein bekannter Bug.
      Hilfe gibt es unter http://positioniseverything.net/explorer/doubled-margin.html.

      mit display:inline hat es geklappt.

      Danke und Gruß, Jürgen