nicht angemeldet
Hallo,
ich habe zwei Blockelemente, die nebeneinander dargestellt werden sollen, und mit dem oberen Rand auf gleicher vertikaler Position liegen sollen.
Das funktioniert nur, solange ich keinen oberen Außenrand angebe. Sobald ich für margin-top einen Wert != 0 eingebe, wie im Beispiel:
<!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=iso-8859-1" />
<title>Titel</title>
<style type="text/css">
html, body { margin:0; }
body { font-size:100.1%; padding:5px; background:#e0915a; text-align:left; }
#box1 {
float:left;
text-align:left;
font: normal 0.93em Helvetica,Tahoma,Arial,sans-serif;
color:black; background:#fdcc8e;
width:9em;
/* diesen margin meine ich: */
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;
/* und hier für das rechte Element: */
margin:1em 0 0 10.5em;
padding:0;
border:0;
}
</style>
</head>
<body>
<div id="box1">sdfa afasf adf</div>
<div id="box2">sdfa afasf adf</div>
</body>
</html>
liegen die Elemente im IE6 auf unterschiedlicher Höhe, während FF 1.5 und Opera 8.5 korrekt reagieren. Dabei ist es egal, ob ich em oder px verwende.
Warum macht der IE das? Er müßte hier doch eigentlich standard-konform rendern (soweit er das überhaupt kann), oder?
Danke für Eure Hilfe
Roland