IE6 Geisterabstand zwischen 2 gefloateten Containern

  • Hallo liebe TP-CSS-Profis,


    ich habe ein PRoblem wie im Titel schon beschrieben hiermit:
    IE6 Geisterabstand zwischen 2 gefloateten Containern


    Das Online-Beispiel gibt es hier: IE6 Geisterabstand zwischen 2 gefloateten Containern


    Das HTML/CSS stammt aus einer Dreamweaver-Vorlage welche ich nur geringfügig im CSS abgeändert habe.


    Original-CSS:

    HTML
    1. .twoColFixLtHdr #sidebar1 {
    2. float: left; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
    3. width: 200px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
    4. background: #EBEBEB; /* Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt. */
    5. padding: 15px 10px 15px 20px;
    6. }
    7. .twoColFixLtHdr #mainContent {
    8. margin: 0 0 0 250px; /* Durch den linken Rand dieses div-Elements entsteht die Spalte am linken Seitenrand. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge des sidebar1-div immer gleich. Sie können diesen Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 füllen soll, wenn der Inhalt in #sidebar1 endet. */
    9. padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
    10. }


    Modifiziertes-CSS:


    Es geht um den Sidebar und den Content-Container, diese sollten sich nahtlos aneinander schmiegen auch im IE 8)


    Ich habe dafür bis jetzt keine Lösung gefunden *haareausrauf*

  • Im IE6 hab ich keinen Abstand zwischen den Boxen - Link. Hab das mal selbst nachgebaut ;).


    Danke Rinaldo für den Nachbau, das bringt mich aber nicht wirklich weiter...


    Auf der Adobe Summer School 2007 wurde demonstriert wie mit den in Dreamweaver mitgelieferten CSS-Layouts schnell neue Seiten erstellen kann.


    Dieses Feature möchte ich nutzen und erweitern.
    Dazu müsste ich wissen wo in dem Adobe-CSS der Fehler liegt...

  • Das ganze kommt vom Fehlerhaften Boxmodel des IE; FF rechnet korrekterweise den 1px Rahmen zur Breite dazu, IE 6 nicht. Somit ist die linke Box nur 230px breit, die rechte hat aber ein Margin von 232px. Hier müsste ne Browserweiche ran!


    //Edit: kommando zurück...muss nochmal nachschauen :D

    Anstatt zu klagen was ihr wollt, solltet ihr dankbar sein, dass ihr nicht all das bekommt, was ihr verdient ;)
    ------------------------------------------
    Virtuelle Babyparty :D
    ------------------------------------------
    [COLOR="SeaGreen"]ich will mehr grüne kästchen!


  • Vielen Dank Boris, bin gerade beim durchstöbern von Ninas IE Buglist darauf gestoßen, das es dieser 3px Bug sein könnte.


    Nur kapiere ich nicht ganz was ich in meinem Beispiel aus diesem Muster machen müsste:


    Vielleicht hätte jemand mit mehr CSS und Englisch-Erfahrung (als ich sie habe) einen passenden Tipp für mich ;)

  • Problem gelöst, Patient tot :D
    Mithilfe dieses Tutorials Die Loesung des 3 Pixel Text-Jog (Bug) im Internet Explorer ist es mir gelungen in meinem Beispiel alles wie gewünscht zu formatieren.


    Siehe hier: http://www.fit-as-well.de/redesign/twoColFixLtHdr.htm


    Nun gibt es aber noch ein 2. Problem in der Darstellung und zwar:


    Wird die Content-Box im IE auf gleicher Höhe wie die Sitebar1-Box dargestellt, so soll es auch sein.
    Der FF macht oberhalb der Contentbox einen Abstand, wo kommt nun dieser wieder her?

  • Huhu! h1 ist schuld. Wenn du im css h1 margin:0; gibst, dann funktionierts.


    Du hast zwar margin und padding im body auf 0 gesetzt, aber schreib besser nochmal * {margin....} dazu.


    Ich dachte zwar immer, dass nur im CSS nur formatierungen für html {} nur vom IE wahrgenommen werden, aber scheinbar ist das mit body auch ein Problem.

    Anstatt zu klagen was ihr wollt, solltet ihr dankbar sein, dass ihr nicht all das bekommt, was ihr verdient ;)
    ------------------------------------------
    Virtuelle Babyparty :D
    ------------------------------------------
    [COLOR="SeaGreen"]ich will mehr grüne kästchen!

  • Verrückt selbst die Angabe von:

    HTML
    1. *html {
    2. margin: 0;
    3. padding: 0;
    4. border: 0
    5. }


    veranlasst den Firefox nicht dazu den Abstand oben wegzulassen, erst das zusätzliche einfügen von:

    HTML
    1. h1 {
    2. margin: 0
    3. }


    erziehlt das gewünschte Ergebnis.


    Nun gibt es noch am Ende des div id="mainContent" einen Abstand zum Footer ebenfalls nur im Firefox, ich vermute das liegt an diesem:
    <br class="clearfloat" /> mit dem CSS:

    HTML
    1. .clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
    2. clear:both;
    3. height:0;
    4. font-size: 1px;
    5. line-height: 0px;
    6. }


    Oder liege ich da falsch?

  • Zitat

    *html {

    Das ist ja auch SO der Sternchen-Hack den nur der IE sehen kann (und soll).


    Du musst das html weg lassen, so:


    *
    {
    padding: 0;
    margin: 0;
    } :D

    My software never has bugs. It just develops random features ... :D
    [FONT="System"]&#63743;
    » DevShack - die Website des freien Webentwicklers Boris ;)

  • macht soweit keinen unterscheid meine ich!

    Anstatt zu klagen was ihr wollt, solltet ihr dankbar sein, dass ihr nicht all das bekommt, was ihr verdient ;)
    ------------------------------------------
    Virtuelle Babyparty :D
    ------------------------------------------
    [COLOR="SeaGreen"]ich will mehr grüne kästchen!

  • Perfekt, Boris hat den richtigen Hinweis gegeben [Blockierte Grafik: http://www.traum-projekt.com/forum/images/icons/icon14.gif
    So ein TP-Greis ist echt eine Bereicherung ;)


    Jetzt dank des echten puren Sternchenhacks:

    HTML
    1. * {
    2. margin: 0;
    3. padding: 0;
    4. border: 0
    5. }


    Ist es nicht mehr notwendig der Überschrift separat bescheid zusagen, mach mal keinen Abstand da hin wo Du nicht sollst ;)


  • Du hast zwar margin und padding im body auf 0 gesetzt, aber schreib besser nochmal * {margin....} dazu.


    Buuuhuhuhu ich hab das zuerst geschrieben, diese Lorbeeren sind meine!! :D

    Anstatt zu klagen was ihr wollt, solltet ihr dankbar sein, dass ihr nicht all das bekommt, was ihr verdient ;)
    ------------------------------------------
    Virtuelle Babyparty :D
    ------------------------------------------
    [COLOR="SeaGreen"]ich will mehr grüne kästchen!