CSS Problem mit margin-top

[linuxfan]

Hallo ich habe fogenden Code:

<div id="entirerange">
<div id="headrange">
  <ul class="links">
   <li><a href=""><img src="./graphics/test.png" height="20px" alt=""></a></li>
   <li><a href=""><img src="./graphics/test.png" height="20px" alt=""></a></li>
   <li><a href=""><img src="./graphics/test.png" height="20px" alt=""></a></li>
  </ul>
</div>
</div>

dazu die CSS-Infos:

#entirerange {
 width:700px;
 margin-left:auto;
 margin-right:auto;
 margin-top:30px;
 border:1px solid black;
 text-align:left;
 voice-family:""}"";
 voice-family:inherit;
 width:698px; }
html>body #entirerange {
 width:698px; }
#headrange {
 height:110px;
 background:url('../graphics/headgraphic.png'); }
img {
 vertical-align:bottom;
 border:none; }
ul {
 padding:0px;
 margin:0px; }
li {
 padding:0px;
 margin:0px;
 list-style-type:none;
 float:left; }
ul.links { margin-top:90px; }

Das Problem ist wie im Bild: das div headrange soll 110px hoch sein und ul soll 90px von Oberkante headrange entfernt sein, doch er erweitert die Höhe um margin-top, also 110px+90px!

Auf dem Bild kann man das hoffentlich nachvollziehen! Was ist der Fehler? So wie im Bildteil unten soll es sein ...

[Detlef G.]

Hallo linuxfan

Das Problem ist wie im Bild: das div headrange soll 110px hoch sein und ul soll 90px von Oberkante headrange entfernt sein, doch er erweitert die Höhe um margin-top, also 110px+90px!

Ja, weil bei direkt anneinanderstoßenden vertikalen margins der größere
berücksichtigt wird. (s. Collapsing margins)

Trenne diese voneinander.

Auf Wiederlesen
Detlef