JürgenB: margin und float

SELF-Forum

margin und float

JürgenB
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. margin und float

    Onkel Schnitzel
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. margin und float

      JürgenB Homepage des Autors
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. margin und float

    Hopsel
    +1 Informationen zu den Bewertungsregeln

    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
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. margin und float

      JürgenB Homepage des Autors
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln