lustiges div-hüpfen

[jan b.]

hallo alle,

habe seltsamen effekt bei folgendem div:

#logo {
 margin-left:auto;
 margin-right:auto;
 margin-top:10px;
 padding:0;
 background-image:url(bilder/logo.gif);
 width:600px;
 height:150px;
 z-index:1;
 border:1px transparent solid;
 }

so wird der layer dargestellt wie ich es will; setze ich jedoch die border auf 0 bzw auf 0px, dann springt das ganze rund 100 pixel nach unten.

folgende body-formatierung:

body {
 background-image:url(bilder/back.jpg);
 background-color:transparent;
 font-family:"Arial Narrow",Tahoma,Verdana,sans-serif;
 font-size:11pt;
 color:#000000;
 line-height:14pt;
 margin:0;
 padding:0;
 min-width:600px;
 text-align:center;
}

dazu die navigation im logo:

#naviob {
 margin-left:auto;
 margin-right:auto;
 margin-top:125px;
 padding-top:0;
 width:100%;
 z-index:2;
 text-align:center;
 border:0;
 }

und so in html:
<div id="logo">

<div id="naviob">
<table width="600px" cellpadding=0 cellspacing=0>
       <tr>
<!--hier der inhalt der navigation-->
       </tr>
</table>
</div>
</div>

was ist da los?

für eure hinweise wär dankbar
jan

[sorry]

kein bock das jetzt auszuprobieren. wenn du hilfe willst speicher die seite auf nem server von dir ab und verweise!.

[molily]

Hallo, Jan,

das Problem ist leider etwas kompliziert, ich habe es untersucht, aber habe keine Erklärung gefunden, nur dass das von dir beobachtete Verhalten offenbar standardkonform ist, das es von Mozilla und Opera 6.05 und 7b2 wie von dir beschrieben an den Tag gelegt wird.

Erneut eine kurze Zusammenfassung des Falles.
Es existieren zwei div-Elemente, von welchem einen das andere enthält:

<div id="a">
 <div id="b">text</div>
</div>

Weitere Umstände:
 #a hat kein padding und kein border (explizit 0 bzw. none)
 #b hat kein padding und margin-top>0

Die gewünschte Anzeige ist (die Ränder sind vorerst nur gedacht, das heißt nicht unbedingt sichtbar):

+---------------------------+
|                           |
|                           |
|                           |
|                           |
|+-------------------------+|
|| text                    ||
|+-------------------------+|
+---------------------------+

(Angenommen wird weiterhin, dass padding-top bei #a nicht anstelle von margin-top bei #b treten kann, da die Höhe von #a festgelegt werden soll - das wäre zwar über Höhe minus padding-top gleich height möglich, aber diese Alternativmöglichkeit soll hier nicht behandelt werden.)

Es lässt sich jedoch die Beobachtung machen, dass die tatsächliche Anzeige von der gewünschten abweicht.

Version ohne border:
  http://home.t-online.de/home/dj5nu/fanhost/b.html

Anstatt dass #a um die margin-top von #b erhöht wird, wird #bs margin-top als margin-top von #a interpretiert und #a wird mitsamt #b um die angegebene Größe von der oberen content edge des #a-Elternelements abgesetzt.

Wird jedoch eine border bei #a definiert (border-style:!none), ist die Ausgabe wie gewünscht.

Version mit border:
  http://home.t-online.de/home/dj5nu/fanhost/a.html

Ebenso, wenn #a zusätzlichen Inhalt (Textknoten) vor dem Kindelement #b hat.

Version ohne border mit Text in #a:
 http://home.t-online.de/home/dj5nu/fanhost/c.html

Testumgebung: Mozilla 1.2b und 1.3a, Opera 6.05 und 7b2 auf Win98 getätigt; MSIE 6 zeigt alle Versionen nahezu gleich an.

Ich vermute, dass es mit collapsing margins und/oder den verschiedenen edges zu tun hat, welche zusammenfallen, wenn border nicht gesetzt ist (und damit die border edge wegfällt).
Bezüglich collapsing margins: http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Bezüglich den verschiedenen edges, welche wegfallen: Siehe http://www.w3.org/TR/CSS21/box.html#box-dimensions bzw. die Definitionsliste http://www.w3.org/TR/CSS21/box.html#content-edge.

Genauso kann es in folgendem Absatz definiert sein: http://www.w3.org/TR/CSS21/visudet.html#q17 (»Computing heights and margins« -> »Block-level, non-replaced elements in normal flow and floating, non-replaced elements«): <q>If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box and the bottom border-edge of the bottommost block-level child box.</q>

Alle drei Teile der Specs sind mir teilweise oder komplett unverständlich beziehungsweise erkenne ich nicht diejenige Regel, welche die oben genannten Beobachtungen bedingt.

Vielleicht hat jemand eine Erklärung...

Grüße,
Mathias

[jan b.]

hallo mathias,

wow, schönen dank, daß du dir die mühe gemacht hast, das zusammen zu suchen! habe gar nicht mehr mit ner antwort gerechnet...

erstmal scheint es ja eine lösung zu sein, die border auf null zu setzen...

gruß und ein erfreuliches 2003
jan