position:absolute mit left, bottom, right, top unter Mozilla/IE

[Hape]

Hiho,

mein Kollege und ich streiten uns gerade ein wenig um folgenden Umstand.

<div style="position:absolute;left:10px;top:10px;bottom:10px;right:10px;background-color:#000000;color:#ffffff;>Test</div>

Unter Mozilla (z. B. Firefox) werden die Layerränder jeweils soweit "aufgezogen", dass zwischen dem Layer sowohl oben, unten, rechts, links nur 10 Pixel Platz sind. Skaliert man das Fenster nun, passt sich die Box an. Sehr netter Effekt.

Schaut man sich das Ganze nun unter IE (IE 6) an, dann sieht man ein kleines schwarzes Kästchen, was den weissen Text umfasst. Lediglich der Abstand von 10 Pixel ist oben/links (oder je nach dem welche Angabe gerade interpretiert wird) zu sehen. Der DIV-Layer wird nicht aufgezogen.

In der selfhtml Doku steht, dass die Angaben dafür da sind entweder die linke obere (left,top), rechte obere (right,top), rechte untere (right, bottom), linke untere (right, botton) Ecke des DIV-Layers, gemessen am Eltern-Element (in dem Fall der Browser) positioniert. Allerding eben nur eine der vier Ecken und nicht alle vier, welches ja beim Mozilla (Firefox) passiert.

Im Gegensatz zu meinem Kollegen bin ich der Meinung, dass die Darstellung im IE richtig ist und die im Mozilla (Firefox) falsch, auch wenn ich den Zustand aus Mozilla (Firefox) gerne unter IE hätte - da man dadurch die Layer per Skalierung endlich richtig nutzen könnte. Denn Prozentangaben verzerren gewöhnlich ja alles, gar wenn ich angeben würde:

<div style="position:absolute; left:10px; top:10px; height:100%; width:100%; background-color:#000000; color:#ffffff;">Test</div>

und dabei beachte das der Body keinen Margin oder Padding nutzt, wird unter IE dennoch eine Scrollleiste angezeigt, da er die 100% statt auf den restlichen Platz auf die Fenstergröße bezieht.

Abschliessend also die Frage, ist die Mozilla-Ausgabe nun konform oder die IE-Ausgabe? Laut selfhtml müsste es IE sein, was das erste Beispiel angeht ...

Ich würde mich hier auf Antworten mit 100% Aussage freuen :o)

MfG Hape

[Cheatah]

Hi,

Schaut man sich das Ganze nun unter IE (IE 6) an, dann sieht man ein kleines schwarzes Kästchen, was den weissen Text umfasst.

der kann das nicht koordinieren. Für den IE brauchst Du zusätzlich width und height. Es bietet sich der Star-HTML-Hack an, ggf. unter Verwendung der proprietären expression()-Eigenschaft.

Im Gegensatz zu meinem Kollegen bin ich der Meinung, dass die Darstellung im IE richtig ist

Dein Kollege hat Recht. Wie so oft ist der IE zu blöd für die einfachsten Dinge.

und die im Mozilla (Firefox) falsch,

Recherchiere beim W3C die Berechnung des Wertes "auto" bei der height-Eigenschaft.

Denn Prozentangaben verzerren gewöhnlich ja alles,

Prozentwerte sind hier nicht das Mittel der Wahl - es sei denn, Du hast die absolute Positionierung nicht sinnvoll eingesetzt.

Abschliessend also die Frage, ist die Mozilla-Ausgabe nun konform oder die IE-Ausgabe?

Die Antwort auf diese Frage ist in annähernd 100% aller Fälle identisch. In dubio pro Mozillam.

Cheatah

[MudGuard]

Hi,

Die Antwort auf diese Frage ist in annähernd 100% aller Fälle identisch. In dubio pro Mozillam.

Sorry, aber da muß ich korrigierend eingreifen.

"pro" zieht den Ablativ nach sich, nicht den Akkusativ. Es muß also korrekt heißen:

In dubio pro Mozilla ;-)

cu,
Andreas

[Cheatah]

Hi,

"pro" zieht den Ablativ nach sich, nicht den Akkusativ.

Mist, ich wusste es! :-)

Cheatah

[MudGuard]

Hi,

"pro" zieht den Ablativ nach sich, nicht den Akkusativ.
Mist, ich wusste es! :-)

Du hast das also vorsätzlich falsch geschrieben?! ;-)

cu,
Andreas

[Cheatah]

Hi,

Du hast das also vorsätzlich falsch geschrieben?! ;-)

irgendwie erinnert mich dieser Satz an einen alten Dialog:

"Wie ist Ihr Name?"
"Przlimezky."
"Wie schreiben Sie sich?"
"S - I - C - H."

Und die Antwort lautet: Nein, ich habe "das" noch nie "falsch" geschrieben.

Cheatah ;-)

[Ingo Turski]

Hi,

In der selfhtml Doku steht, dass die Angaben dafür da sind entweder die linke obere (left,top), rechte obere (right,top), rechte untere (right, bottom), linke untere (right, botton) Ecke des DIV-Layers, gemessen am Eltern-Element (in dem Fall der Browser) positioniert. Allerding eben nur eine der vier Ecken und nicht alle vier, welches ja beim Mozilla (Firefox) passiert.

In solchen Fällen solltest Du keine Sekundärquellen sondern die Originaldokumentation bzu Rate ziehen. Das W3C beschreibt zu CSS 2.1 in 10.6.4 Absolutely positioned, non-replaced elements:
"For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block"

Dies ist als rechnerische Formel zwar nur eingeschränkt nutzbar, aber immerhin wird hier top und bottom in einen Zusammenhang mit height gesetzt. Ich finde das zwar nicht besonders deutlich formuliert, aber es sollte dennoch ausreichen, die Meinung Deins Kollegen zu bestätigen.

freundliche Grüße
Ingo

[MudGuard]

Hi,

<div style="position:absolute;left:10px;top:10px;bottom:10px;right:10px;background-color:#000000;color:#ffffff;>Test</div>

Unter Mozilla (z. B. Firefox) werden die Layerränder

welches Layer? Mozilla kennt keine layer.

jeweils soweit "aufgezogen", dass zwischen dem Layer sowohl oben, unten, rechts, links nur 10 Pixel Platz sind. Skaliert man das Fenster nun, passt sich die Box an. Sehr netter Effekt.

Was erwartest Du anderes? Das ist doch das, was in den Styles des div steht.

In der selfhtml Doku steht

leider nicht immer das richtige.

Aus der Beschreibung zu position:

absolute
    The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties.

Im Gegensatz zu meinem Kollegen bin ich der Meinung, dass die Darstellung im IE richtig ist und die im Mozilla (Firefox) falsch,

Falsch.

Abschliessend also die Frage, ist die Mozilla-Ausgabe nun konform oder die IE-Ausgabe?

Mozilla

cu,
Andreas