Einmal mehr: ungwollte Abstände

[Rüdiger]

Ahoy,

ich darf es - diesmal sauber formatiert - nochmal versuchen?

Alles, was ich bisher im Forenarchiv zu dem Thema gefunden habe, das mich hier beschäftigt, ist dieser Thread. Aber der trifft es auch nicht richtig.

Ich habe ein paar ineinandergeschachtele Block-Elemente (DIV), die pixel-/passgenau vertikal aneinander angrenzen sollen.
Das tun sie auch.
...solange sie keine weiteren Block-Elemente enthalten, die einen margin haben.

Ich habe es mit zwei verschiedenen Verschachtelungs-Strukturen versucht, das Ergsbnis ist nur marginal unterschiedlich.

--- Struktur 1: -----------------------

  
<style type="text/css">  
[code lang=css]  
div#d13_wrapper {  
  padding-top:        20px;  
  background-image:   url("wrapper_a.gif"); /* */  
  background-repeat:  no-repeat;  
}  
div#d13_wrapper div.bottom {  
  padding-bottom:       30px;  
  background-image:     url("wrapper_c.png"); /* */  
  background-position:  bottom;  
  background-repeat:    no-repeat;  
}  
div#d13_wrapper div.body {  
  background-image:   url("wrapper_b.png"); /* */  
  background-repeat:  repeat-y;  
}  

</style>
<div id="d13_wrapper"><div class="bottom"><div class="body">
  <div id="d13_content">
   <h1>Ja, das ist ein Problem!</h1>
  </div>
 </div></div></div>
[/code]
--- End 1 -----------------------

--- Struktur 2 (even worse): -----------------------

  
<style type="text/css">  
[code lang=css]  
div.d13_navigation_block .top {  
  height:             15px;  
  background-image:   url("menue_a.png");  
  background-repeat:  no-repeat;  
}  
div.d13_navigation_block div.body {  
  padding:            0 10px;  
  background-image:   url("menue_b.png");  
  background-repeat:  repeat-y;  
}  
div.d13_navigation_block div.bottom {  
  height:               25px;  
  background-image:     url("menue_c.png");  
  background-position:  left bottom;  
  background-repeat:    no-repeat;  
}  

</style>
<div class="d13_navigation_block"><div class="top"></div><div class="body">
  <p>Text...</p>
 </div><div class="bottom"></div></div>
[/code]
 --- End 2 -----------------------

...und hier das ganz in der Praxis

So, was hab ich nun nicht bedacht, falsch gemacht, nicht gewußt, übersehen?
Es reicht ein Link, wo ich es nachlesen kann.