Zu den Aufzeichnungen der tutorials.de-Live-Workshops
Like Tree1Danke
  • 1 Beitrag von spicelab
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
544
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 07.09.10 13:36 #1
    GAngZta GAngZta ist offline Mitglied
    Registriert seit
    Sep 2010
    Beiträge
    20
    Hallo an alle!

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

    HTML-Code:
    <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!!
     
    Zitieren Zitieren
  2. 07.09.10 18:32 #2
    Avatar von spicelab
    spicelab spicelab ist offline goaspicy
    Registriert seit
    Feb 2010
    Beiträge
    1.392
    Die Ursache findet sich hier im hasLayout.

    Lösung:

    Code xhtml:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    <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:
    Geändert von spicelab (07.09.10 um 18:56 Uhr) Grund: Zusatz-Info
    GAngZta bedankt sich. 
    Zitieren Zitieren
  3. 07.09.10 23:55 #3
    GAngZta GAngZta ist offline Mitglied
    Registriert seit
    Sep 2010
    Beiträge
    20
    Klasse! Wieder habe ich etwas dazu gelernt! Ich danke dir sehr******
     
    Zitieren Zitieren
« Problem mit "text-align:right;" | Runde Ecken im IE »

Ähnliche Themen

  1. margin-bottom im IE7
    Von dobber812 im Forum CSS
    Antworten: 4
    Letzter Beitrag: 19.07.09, 21:37
  2. Firefox schluckt margin-bottom und margin-right
    Von JackLevin im Forum CSS
    Antworten: 6
    Letzter Beitrag: 12.09.08, 13:49
  3. SELECT problem margin-bottom in zelle
    Von cool-catti im Forum CSS
    Antworten: 1
    Letzter Beitrag: 25.09.05, 20:28
  4. abstände zwischen tabellenzellen mit margin-top, margin-bottom
    Von verozame im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 13.12.04, 13:51
  5. margin-bottom
    Von unlord im Forum HTML & XHTML
    Antworten: 3
    Letzter Beitrag: 02.06.04, 16:40