nicht angemeldet
Unterschied Firefox/IE bei zweispaltigem Layout
StruppiHallo,
wenn ich in css wie folgt ein zweispaltiges Layout realisiere, stellt der Firefox leider beide Spalten mit einem Abstand von 75px von oben dar, der IE nicht. Mache ich einen Fehler?
<html>
<head>
<title>Test</title>
<meta name="author" content="Jens">
<style type="text/css">
div.links { float:left; width:375px; margin-left:50px; }
div.rechts { width:375px; margin-left:449px; margin-top:75px; }
</style>
</head>
<body>
<div class="links">links</div>
<div class="rechts">rechts</div>
</body>
</html>
Dank & Gruß
Jens
-
Hallo,
das könnte daran liegen, dass der IE mit Pixeln seine Schwäche hat. Verwende stattdessen em oder % oder pt.
Übrigens, du kannst auch statt "margin-top:...; margin-left:...;" das hier schreiben:margin:1px 20px 200px 100px;
1px steht für oben,
20px steht für rechts,
200px steht für unten und
100px steht für links.Auf dich übertragen heißt das:
margin:75px 0 0 449px;MfG
-
Hallo,
das könnte daran liegen, dass der IE mit Pixeln seine Schwäche hat.
Hm, ich finde das gerade eher eine Schwäche des Firefox, da ich doch für eine Spalte einen Abstand definiert habe, der aber für beide (fälschlicherweise?) interpretiert wird.
Gruß
Jens -
das könnte daran liegen, dass der IE mit Pixeln seine Schwäche hat. Verwende stattdessen em oder % oder pt.
Seit wann das denn?
und warum sollte man eine Angabe die eher für media="print" gedacht ist für das screen CSS verwenden?Struppi.
--
Javascript ist toll (Perl auch!)
-
-
Hallo,
stellt der Firefox leider beide Spalten mit einem Abstand von 75px von oben dar, der IE nicht.
mit welchem Firefox hast du getestet? Ich kann das Verhalten in meinem Firefox 2.0 nachvollziehen.
Opera und IE sind sich in der Darstellung einig, es scheint sich tatsächlich um einen Fehler im FF zu handeln. Der Fehler wird anscheinend dadurch getriggert, dass beide <div>s "oben" an den <body> grenzen.
Ein beliebiges inline oder blockelement, sowie ein <br> vor den beiden divs oder ein body {padding:1px;} lenkt die rendering engine in geordnetere Bahnen.Mache ich einen Fehler?
Nein. Kann jemand diesen Bug bestätigen oder bin ich einfach nur blind?
Grüße,
Jochen
-
hi,
Opera und IE sind sich in der Darstellung einig, es scheint sich tatsächlich um einen Fehler im FF zu handeln.
Nope.
Der Fehler wird anscheinend dadurch getriggert, dass beide <div>s "oben" an den <body> grenzen.
Ein beliebiges inline oder blockelement, sowie ein <br> vor den beiden divs oder ein body {padding:1px;} lenkt die rendering engine in geordnetere Bahnen.Ja, ein padding-top, border-top oder auch clearance für das Kindelement (hier wegen floating des linken Elements natürlich eher sinnlos) beseitigen den - korrekten - Effekt.
http://forum.de.selfhtml.org/archiv/2005/3/t103205/#m635297Mache ich einen Fehler?
Nein. Kann jemand diesen Bug bestätigen oder bin ich einfach nur blind?
Sagen wir so: Die Entwickler von IE und leider auch Opera haben die Spezifikation leider nicht ganz so genau gelesen oder so korrekt umgesetzt, wie die vom Firefox.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hallo wahsaga,
Ja, ein padding-top, border-top oder auch clearance für das Kindelement (hier wegen floating des linken Elements natürlich eher sinnlos) beseitigen den - korrekten - Effekt.
http://forum.de.selfhtml.org/archiv/2005/3/t103205/#m635297ich habe mir den verlinkten Thread, die Ausführungen des W3C über Collapsing margins mehrmals durchgelesen.
Vor allem der zitierte Absatz:
The top margin of an in-flow block-level element is
adjoining to its first in-flow block-level child's top
margin if the element has no top border, no top padding,
and the child has no clearance.
macht mir Kopfschmerzen. Es gelingt mir auch nicht diesen Satz auf das beschriebene Verhalten anzuwenden. Vielleicht ist es aber auch nur zu spät um es zu verstehen.Grüße,
Jochen
-
hi,
Vor allem der zitierte Absatz: [...] macht mir Kopfschmerzen. Es gelingt mir auch nicht diesen Satz auf das beschriebene Verhalten anzuwenden.
The top margin of an in-flow block-level element
Zum margin-top eines im Fluss befindlichen block-level Elements (im vorliegenden Fall m.E. body)
is adjoining
[schwierig wörtlich zu übersetzen - hier adjoining etwa gleich angrenzend]
wird also dasto its first in-flow block-level child's top margin
margin-top seines ersten im Fluss befindlichen block-level Kindelements (hier der _nicht_ gefloatete Div) hinzugenommen
if the element has no top border, no top padding,
wenn das Element (body) kein border-top und kein padding-top hat
and the child has no clearance.
und besagtes Kindelement kein "clearance" besitzt (clearance ist eine Art "gedachter" Abstand, der nötig ist um das Element bis unter sein gefloatetes Nachbarelement zu drücken).
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga,
vielen Dank für deine Mühe, ich werde das bei Gelegenheit, in Ruhe ausprobieren.
Grüße,
Jochen
-
-
-
Hallo,
Mache ich einen Fehler?
Sagen wir so: Die Entwickler von IE und leider auch Opera haben die Spezifikation leider nicht ganz so genau gelesen oder so korrekt umgesetzt, wie die vom Firefox.In dem Fall werde ich das Element aus dem 'links'-Container, das den Grund für den Abstand des 'rechts'-Containers ist getrennt von beiden darüber einfügen.
Die Idee ist mir aber auch erst heute morgen gekommen.
Dank & Gruß
Jens
-
-
-
wenn ich in css wie folgt ein zweispaltiges Layout realisiere, stellt der Firefox leider beide Spalten mit einem Abstand von 75px von oben dar, der IE nicht. Mache ich einen Fehler?
Vermutlich.
<html>
Wo ist der DOCTYPE?
<head>
<title>Test</title>
<meta name="author" content="Jens">Hier fehlt noch die Angabe des verwendeten Zeichensatzes.
<style type="text/css">
div.links { float:left; width:375px; margin-left:50px; }
div.rechts { width:375px; margin-left:449px; margin-top:75px; }
</style>
</head>
<body>
<div class="links">links</div>
<div class="rechts">rechts</div>
</body>
</html>Der IE (im Standardmode) stellt, das linke ohne margin top da, das rechte mit, was willst du genau erreichen?
Struppi.
--
Javascript ist toll (Perl auch!)-
Hallo,
wenn ich in css wie folgt ein zweispaltiges Layout realisiere, stellt der Firefox leider beide Spalten mit einem Abstand von 75px von oben dar, der IE nicht. Mache ich einen Fehler?
Vermutlich.
Wenn der Effekt (seitens der Vorgaben für css) so gewollt ist, sind meine Erwartungen fehlerhaft. Unvoreingenommen von mir betrachtet läuft bei so einem Effekt mit diesen Angaben im Browser etwas schief.
[...]
Wo ist der DOCTYPE?
[...]
Hier fehlt noch die Angabe des verwendeten Zeichensatzes.
Da fehlt noch einiges. ;-)
Der IE (im Standardmode) stellt, das linke ohne margin top da, das rechte mit, was willst du genau erreichen?
Links Schriftzug, darunter Bild; rechts Text zum Bild. Wie unten erläutert, ist mir auch aufgefallen, dass der Schriftzug nicht in den linken Container gehört.
Gruß
Jens
-