Problem mit margin-bottom

G

GAngZta

Mitglied
Hallo an alle!

Ich benötige dringend eure Hilfe.
Ich habe folgenden Code:

HTML: 
<body style="background-color: blue;">
   <!-- Erste Ausgabe //-->
   <div style="margin-bottom: 8px;">    
      <div style='background-color: white;'>
          <div style="float:left;">hier steht text</div>
          <div style="float:right;"><img src="" /></div>
          <div style='clear:both;'></div>
      </div>
   </div>  
   
   <!-- Zweite Ausgabe //--> 
    <div style="margin-bottom: 8px;">    
      <div style='background-color: white;'>
          <div style="float:left;">hier steht text</div>
          <div style="float:right;"><img src="" /></div>
          <div style='clear:both;'></div>
      </div>
   </div> 
</body>

Zwischen "Erste Ausgabe" und "Zweite Ausgabe" soll ein kleiner Abstand sein (in diesem Fall 8px).
Dieser hat (normalerweise) die Farbe blau (body-background). Im IE6 + IE7 nimmt er allerdings die Farbe weiß, von dem darunter liegendem div-Container. Kann mir jemand erklären wie das kommt? Übersehe ich etwas? Im Firefox, Chrome, ... wird es richtig gemacht.

Vielen Dank für Hilfe!!
 
Die Ursache findet sich hier im hasLayout.

Lösung:

HTML: 
<body style="background-color: blue;">
<!-- Erste Ausgabe //-->
   <div style="margin-bottom: 8px; height:1%;">
      <div style='background-color: white;'>
          <div style="float:left;">hier steht text</div>
          <div style="float:right;"><img src="" /></div>
          <div style='clear:both;'></div>
      </div>
   </div>
   <!-- Zweite Ausgabe //-->
    <div style="margin-bottom: 8px; height:1%;">
      <div style='background-color: white;'>
          <div style="float:left;">hier steht text</div>
          <div style="float:right;"><img src="" /></div>
          <div style='clear:both;'></div>
      </div>
   </div>
</body>

Noch ein Tipp zum Schluß: Anstelle des inhaltsleeren <div>-Elements, das ausschließlich zum Abbruch der Floats dient, bietet CSS eine weitaus elegantere Technik, insbesondere wenn es im HTML-Code mehrfach benötigt wird, und so den Quellcode unnötig aufbläht:

 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück