nicht angemeldet
margin-top browserabhängig?
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
-
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 -
Hey,
dein Beispiel ist ja grauenhaft. Ein minimaler Testcase sieht vor, dass der Fehler verschwindet, wenn noch mehr entfernt wird. http://www.mozilla.org/newlayout/bugathon.html#testcase Bei dir ließ sich aber noch allerhand Unnötiges entfernen. Wenn die Übersicht erst einmal hergestellt ist, ist sonnenklar, wo das Übel liegt.<!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"> [code lang=css]body {padding: 5px;} /* ! */ #box1 { float: left; margin-top: 1em; } #box2 { margin-top: 1em; } /* div {border: 1px solid pink;} Debugborders */</style>
</head>
<body>
<div id="box1">sdfa afasf adf</div>
<div id="box2">sdfa afasf adf</div>
</body>
</html>[/code]Richte deine Aufmerksamkeit auf die mit dem Ausrufezeichen vermerkte Regel. Die 5 Pixel Unterschied in der Anzeige kommen von daher.
--
水－金－地－火－木－土－天－海－冥-
Hallo 迪拉斯,
erstmal danke schön für die Antwort!
Und ich dachte, ich hätte mein Beispiel schon auf das Nötigste reduziert...
Fein, ich habe das padding im body entfernt, und jetzt sieht es im IE so aus, wie ich es erwarte. Aber verstanden habe ich das nicht, warum reagiert das eine DIV so, das andere nicht? Und warum browserabhängig?
Und: Jetzt ist die linke Box im FF zu tief, und zwar wächst die Differenz, je größer ich den margin-top bei beiden DIVs mache (nach wie vor der gleiche Wert in beiden DIVs). Bei Opera stimmt immer noch alles.
Roland (leicht verwirrt)
-
Und: Jetzt ist die linke Box im FF zu tief (...)
OK, das ist ein anderes Problem, wie ich gerade mit debug-borders gesehen habe. Die DIVs liegen im FF jetzt übereinander, was ich allerdings auch nicht wirklich verstehe..
-
-