Encoder: seltsame Lücke zwischen Elementen

SELF-Forum

seltsame Lücke zwischen Elementen

Encoder
– Informationen zu den Bewertungsregeln

Hallo
Ich hab ein komisches Problemchen in Firefox.
Folgender Aufbau:

<div style="background:.... width:300px; display:block; padding:15px 0 0 0;"><div style="border:1px solid green;">
<ul><li>Element</li></ul>
</div>
</div>

Sinn des ganzen, im äußeren div ist ein 15 Pixel großes Hintergrundbild. Nach diesem Bild soll dann das innere div beginnen, mit wieder Hintergrund und Inhalt.
Wenn ich das so nachstelle sieht es auch so aus wie es soll.
In der kompletten Seite allerdings ist zwischen Hintergrundbild und dem unteren Teil eine Lücke.

Firebug sagt mir, der margin des ul steht nach oben hin aus dem inneren div heraus! Das bewirkt diese Lücke. Wenn ich den margin verändere, macht die Lücke mit. Bei 0 ist sie weg.
Der margin müsste sich doch auf den Beginn des inneren div beziehen?

Ich kriege diesen Fall leider nicht nachgestellt und die komplette Seite gibts auch nicht online. Die ist ziemlich umfangreich.
Könnte da irgendwas schuld sein wie overflow oder so, was sich auf Unterelemente auswirkt und da irgendwelche Verschiebungen verursacht?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. seltsame Lücke zwischen Elementen

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Ich kriege diesen Fall leider nicht nachgestellt und die komplette Seite gibts auch nicht online.

    Dann stelle bitte ein Testbeispiel zur Verfügung, an dem sich dein Problem nachvollziehen lässt. Du kannst es gerne anonymisieren, falls die Seite sensible Daten enthalten sollte. Valides HTML und CSS bitte.

    Die ist ziemlich umfangreich.

    Das macht, so lange du die Stelle an der das Problem ersichtlich wird klar genug benennst, niemandem was aus, der mit Firebug o.ä. umgehen kann.

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. seltsame Lücke zwischen Elementen

      Encoder
      – Informationen zu den Bewertungsregeln

      Ok hier wär ein Auszug, der im Vergleich zu meinem ganz selbst geschriebenen Testbeispiel sogar den Effekt bringt.

        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<style type="text/css">  
#topdiv { background:yellow; width:300px; display:block; overflow:auto; padding:0px; margin:0px; }  
#contentdiv {  }  
p { margin:15px 0 0 0; border:1px solid red; }  
</style>  
<title>Testseite</title>  
</head>  
<body>  
<div id="topdiv"><div id="contentdiv"><p>Inhalt</p></div></div>  
</body>  
</html>

      Da hätten wir

      • topdiv: In diesem spielt sich das ganze ab. Hier ist eigentlich der obere Teil einer Box als Hintergrundbild drin und das div hat dann ein padding, so dass der eingeschachtelte Inhalt unter diesem Rahmen beginnt. Das Beispiel geht aber auch ohne das Bild und ohne padding.
      • contentdiv: Hier steht der Inhalt drin. ul oder p ist grad egal, irgendwas das einen margin-top hat. Hier ist auch das Hintergrundbild drin, wer mag kann ja irgendein Bild reinsetzen und dann schauen wo man das sieht.

      Die Hoverfunktion in Firebug zeigt mir, dass contentdiv nicht oben bündig an topdiv liegt, sondern genau den margin-top des Inhalts darunter.
      Das wäre meine Frage, warum? Ein Hintergrundbild im contentdiv geht auch nicht bis ganz oben sondern lässt eben diesen margin-top frei.

      Und dann noch was komisches. Gebt dem contentdiv einen border:1px solid black;
      Dann verhält sich das alles anders. Dann liegt laut Firebug das contentdiv nämlich plötzlich doch oben bündig an. Das erklärt mir dann auch den oberen freien Bereich, denn das ist ja dann der margin.
      Und NUR DANN (mit border) geht auch das Hintergrundbild bis ganz oben.

      Ich stelle fest dass es am overflow:auto liegt. Wenn ich das rauslösche, verhält sich alles wieder anders. Das muss aber rein, aus einem Grund den ich momentan in dem ganzen HTML-Wust nicht erkenne.
      Ich hab da wohl immer noch irgendwas nicht ganz kapiert. Wie wirkt sich das overflow in diesem Fall da aus? Warum kann der margin eines Elements über das Elternelement hinaus ragen? Und wie könnte ich das lösen?
      Und wie erklärt es sich dass mit dem overflow der border das Layout umstellt?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. seltsame Lücke zwischen Elementen

        ChrisB
        – Informationen zu den Bewertungsregeln

        Hi,

        Die Hoverfunktion in Firebug zeigt mir, dass contentdiv nicht oben bündig an topdiv liegt, sondern genau den margin-top des Inhalts darunter.
        Das wäre meine Frage, warum?

        Na wegen dem, was Schuer schon genannt hatte: Collapsing Margins - genauer dem, was dort als “adjoining margins” beschrieben wird.

        Nimm dem P sein margin-top weg (bzw. setze es explizit auf 0, um den Defaultwert zu überschreiben – und weg ist das Phänomen.

        Oder gib dem content-Div ein border-top oder padding-top von 1px – dann sind adjoining margins abgeschaltet.

        Oder, wenn das nicht geht, nimm dem P sein margin-top und gib dem DIV ein padding-top von 15px stattdessen.

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. seltsame Lücke zwischen Elementen

          Encoder
          – Informationen zu den Bewertungsregeln

          Das hab ich mir angesehen. Leider ist das nicht formuliert, um es auf die ersten paar Mal lesen schon zu verstehen ;-)
          Mir fehlt da völlig der Zusammenhang. Im einen Fall ists so, im anderen anders, überall Ausnahmen.  Man ändert irgendwas und dann ist alles sonst definierte auch schon wieder ein anderer Ausnahmefall und verhält sich unterschiedlich zu vorher. Kann man da wirklich durchblicken?

          Gelöst ist das jetzt durch den fehlenden margin-top. Nur wenn der nächste wieder ein bisschen mehr Abstand innerhalb des Elterndivs haben will, genau das wozu man den margin eigentlich vermutet, ist alles wieder verschoben und die Sucherei geht wieder von vorne los.

          Vielleicht kann jemand meine Denkweise korrigieren.
          Ich stelle mir vor, ich hab eine Box IN DER ein Element mit Abstand oben enthalten ist.
          Also der Tisch steht 50 cm von der Wand weg, 30 cm von der Tischkante entfernt liegt ein Blatt Papier. Dieses ist somit 80 cm von der Wand entfernt, egal wie sich der Tisch sonst wie verhalten soll.

          In Wirklichkeit ists aber nicht so. Und mit border wirds dann gleich nochmal anders berechnet.
          Wo denke ich falsch? Ich würd das gerne verstehen, denn mit auswendig lernen kommt man da ja nicht mehr weit.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. seltsame Lücke zwischen Elementen

            ChrisB
            – Informationen zu den Bewertungsregeln

            Hi,

            Also der Tisch steht 50 cm von der Wand weg, 30 cm von der Tischkante entfernt liegt ein Blatt Papier. Dieses ist somit 80 cm von der Wand entfernt, egal wie sich der Tisch sonst wie verhalten soll.

            Besser passt: Der Tisch steht an der (oberen) Wand, und es wir ein Blatt Papier drauf gelegt, das 30cm Abstand von der Wand haben soll.
            In CSS 2.1 ist jetzt *definiert*, dass dies dazu führt, dass der Tisch 30cm von der Wand weggerückt, und das Papier direkt an seiner Kante platziert wird – sofern der Tisch kein Border und kein Padding hat, das ihn von der Wand trennt.

            Das kann man *finden*, wie man will … aber *akzeptieren*, dass es so *definiert* ist, muss man auf jeden Fall.

            Ich würd das gerne verstehen, denn mit auswendig lernen kommt man da ja nicht mehr weit.

            Gewisse Zusammenhänge muss man früher oder später verinnerlichen, wenn man Formatierung mit CSS verstehen und effektiv benutzen will. Da führt kein Weg dran vorbei.

            MfG ChrisB

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. seltsame Lücke zwischen Elementen

              Encoder
              – Informationen zu den Bewertungsregeln

              Ok das bedeutet also, die Positionierung von Elementen bezieht sich nicht unbedingt immer auf das nächste umschließende Element? Sondern auf was dann, auf das vorige wirklich sichtbare Element? Ein div ist ja an sich nicht sichtbar. Außer es hat einen Rand (den man sieht), kommt das hin?

              Umgesetzt, auf was bezieht sich in meinem Code der margin des <p>?
              Da collapst doch eigentlich nix, ich meine eher da verschiebt sich was.
              Womit liege ich da verkehrt?
              Sorry aber ich blick das grad echt nicht mehr.

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. seltsame Lücke zwischen Elementen

                ChrisB
                – Informationen zu den Bewertungsregeln

                Hi,

                Umgesetzt, auf was bezieht sich in meinem Code der margin des <p>?

                Auf das P-Element – schließlich ist es für dieses definiert.

                Da collapst doch eigentlich nix, ich meine eher da verschiebt sich was.

                *Adjoining* margins werden unter den genannten Umständen eben anders interpretiert – *statt* dass das Element selbst den margin bekommt, wird er dem Margin des Elternelementes zugeschlagen (bzw. mit diesem verrechnet).

                MfG ChrisB

                --
                RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

              2. seltsame Lücke zwischen Elementen

                Matthias Apsel Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Om nah hoo pez nyeetz, Encoder!

                Sorry aber ich blick das grad echt nicht mehr.

                einmal noch zum Nachlesen: SELFHTML-Wiki

                Matthias

                --
                1/z ist kein Blatt Papier.

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

  2. seltsame Lücke zwischen Elementen

    Schuer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Könnte da irgendwas schuld sein wie overflow oder so, was sich auf Unterelemente auswirkt und da irgendwelche Verschiebungen verursacht?

    Vermutlich hast Du mit dem Thema Collapsing Margins zu tun, siehe http://reference.sitepoint.com/css/collapsingmargins; oder offiziell http://www.w3.org/TR/CSS2/box.html#collapsing-margins.

    Workarounds könnten z.B. sein:

    • padding statt margin
    • overflow: hidden für das Elternelement

    Viele Grüße
    _Dirk

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln