Abstandsunterschiede IE und Mozilla

[Ricocabo]

Hallo Gemeinschaft

Ich habe Probleme mit unterschiedlichen Abstandsdarstellungen von Internet Explorer und Mozilla (nur Windows).

Auf der Seite www.testfap.kelodesign.de könnt ihr sehen was ich meine: Öffnet diese Seite mal mit dem Internet Explorer 6 oder 7 und mit Firefox.
Die linke Navigation (sidebar1), der Inhalt (mainContent) und die rechte Adressenbox (sidebar2) sollten oben eigentlich bündig abschliessen. Das tun sie auch in sämtlichen aktuellen Browservarianten (Safari, Firefox, Opera, Camino) sowohl auf dem Apple Macintosh als auch auf einem Windows-Rechner (sogar der alte IE 5.1 macht es auf dem Mac richtig). Nur mit dem IE 6 und 7 werden diese 3 Spalten oben nicht bündig dargestellt (auch der Abstand der ersten Zeile zur oberen Linie im Adressblock rechts (sidebar2) variiert. Komme einfach nicht dahinter wieso. Nachfolgend der entsprechende HTML-Teil und das zugehörige CSS (ach ja, den Abstand zum Kopfbereich habe ich mit einem margin-bottom definiert den ich dem DIV-Element #header zugewiesen habe).

Hier der HTML-Teil:

<div id="sidebar1">
          <div id="home"><a href="../index.html" target="_self">Home</a></div>
        <div id="leistungen"><a href="../leistungen.html" target="_self">Leistungen</a></div>  
        <div id="geschichte"><a href="../geschichte.html" target="_self">Geschichte</a></div>
        <div id="referenzen"><a href="../referenzen.html" target="_self">Referenzen</a></div>
        <div id="links"><a href="../links.html" target="_self">Links</a></div>
      <!-- end #sidebar1 --></div>

<div id="sidebar2">
          <strong>FAPUtec GmbH</strong><br />
          Gewerbepark Breisgau <br/>
          Max-Immelmann-Allee <br/>
          79427 Eschbach<br/>
          Tel. 07634 / 552143<br/>
          Fax 07634 / 552169<br />
          Mobil 0171 / 6867004<br/>
<!-- end #sidebar2 --></div>

<div id="mainContent">
        <h1 class="thrColLiqHdr">Startseite </h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p></div>

Und hier das zugehörige CSS:
} 
    .thrColLiqHdr #header {
    background-color: #FFFFFF;
    background-image: url(../images/kopf_HG.jpg);
    background-repeat: repeat-x;
    margin-bottom: 35px;
} 

.thrColLiqHdr #sidebar1 {
    float: left; 
    width: 180px;
    background: #FFFFFF;
    margin-right: 10px;
    margin-left: 20px;
}

.thrColLiqHdr #sidebar1 a {
    color: #333333;
    text-decoration: none;
    padding-left: 15px;
    display: block;
}
    .thrColLiqHdr #sidebar2 {
    float: right;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #999999;
    border-bottom-color: #999999;
    border-top-width: 1px;
    border-bottom-width: 1px;
    width: 180px;
    padding-bottom: 14px;
    padding-top: 14px;
    line-height: 1.4em;
    margin-right: 20px;
    }
    .thrColLiqHdr #mainContent {
    margin-left: 220px;
    margin-right: 220px;
    width: 478px;
    } 

[mogidala]

oha, da melden sich gleich (mindestens) 2 IE Bugs zu Wort.

Der erste ist der double-float-margin-bug. der äußert sich so, dass wenn man float:left und margin-left bzw. float: right und margin-right auf ein element verwendet, der margin-wert verdoppelt wird. das erkennst du leicht daran, dass im IE der linke abstand der linken spalte doppelt so groß ist. am einfachsten ist das zu beheben, indem man dem entsprechenden div ein display:inline; mitgibt.

Weiterhin vermute ich mal, dass dich auch noch der 3px Bug quält - aber versuch erstmal die float-margin geschichte anzupassen, dann schauen wir weiter!

Grüße
daniela

[Ricocabo]

Hallo Daniela

Danke für deine Antwort, aber mein Problem sind nicht horizontale Verschiebungen, sondern das dass die 3 Spalten im IE vertikal oben nicht bündig dargestellt werden, wobei das Problem wohl nur bei der linken Spalte besteht, denn die rechte Spalte ist oben bündig, nur gibt's da Schwierigkeiten mit dem Abstand von oberer Linie zu erster Textzeile. Ich habe mir inzwischen diverse Beiträge zum Thema IE Bugs angeschaut, habe jedoch nichts gefunden was mir hilft. Auch dein Tip den entsprechenden DIVs ein display: inline zuweisen zu lassen hat nicht geholfen. Habe noch andere Möglichkeiten versucht, wie z.B. der mittleren Spalte ein feste Breite zu zuweisen, oder die Höhe der Divs für den IE mit height: 1% zu definieren (Thema haslayout) hat aber alles nichts gebracht. Ich habe auch mal die linke Spalte absolut positioniert, auch ohne Erfolg.

[mogidala]

achso - bei mir ist es im IE6 so, dass die mittlere spalte zwar mittig, aber unterhalb der rechten und linken spalte angezeigt wird (das wird wohl vom double-float dings kommen, denn der abstand ist doppelt so groß).

da ich nur den IE6 zum testen hier hab, weiß ich leider nicht, was das von dir beschriebene problem ist muss jetzt leider auch weg, aber ich schau heute abend nochmal!

//Nachtrag: das mit dem Margin ist offenbar gefixt! wie gesagt, ich schau nachher nochmal drüber!

[sejuma]

Behebe mal noch diese Fehler. li darf nur innerhalb ul vorkommen.

[Ricocabo]

Hallo Daniela

Bei mir sieht es auf meinen angeschlossenen 2 PCs (Windows XP im IE 6 und 7) doch anders aus, die mittlere Spalte ist oben bündig mit der rechten Spalte, nur die linke Navigation ist zu tief?!?