Roland: anders formuliert: magin-top verhält sich seltsam

Beitrag lesen

Nochmal hallo,

nein, ich will nicht drängeln, aber vielleicht war das Thema etwas mißverständlich formuliert, darum versuche ich, mein Problem noch einmal etwas kürzer auszudrücken:

Ich habe zwei DIVs:

<body>
  <div id="box1">sdfa afasf adf</div>
  <div id="box2">sdfa afasf adf</div>
</body>

die folgendermaßen formatiert sind:

#box1 {
  float:left;
  text-align:left;
  font: normal 0.93em Helvetica,Tahoma,Arial,sans-serif;
  color:black; background:#fdcc8e;
  width:9em;
  margin:1em 0 0 0;
  padding:0;
  border:0;
}

#box2 {
  text-align:left;
  font: normal 0.93em Helvetica,Tahoma,Arial,sans-serif;
  color:black; background:#fdcc8e;
  margin:1em 0 0 10.5em;
  padding:0;
  border:0;
}

so daß #box1 links von  #box2 liegt, #box1 eine feste Breite in em hat und #box2 den verbleibenden zur Verfügung stehenden horizontalen Raum ausfüllt.

Beide DIVs sollen vom oberen Rand des übergerodneten Elementes (hier der body), den gleichen Abstand haben, realisiert durch margin-top:1em.

Das Problem:
In Firefox 1.5 und Opera 8.5 klappt alles wie gewünscht, im IE6 ist die vertikale Position der DIVs unterschiedlich, trotz gleicher Formatierung.

Nur, wenn margin-top:0 gesetzt ist, ist die Darstellung in allen der genannten Browser korrekt.

HTML (XHTML 1.0 Strict) und CSS sind valide, was mache ich falsch?

Danke
Roland