FF 1.5/CSS: "background-position: bottom" falsch?

jhahn

N'abend allerseits.

Der neue Firefox 1.5 interpretiert die CSS-Eigenschaft "background-position" anders / falsch / strikter (sucht's euch raus ). Ich komme aber leider nicht hinter die neue Logik dahinter.

Während mein alter FF bei

Code

body {
    background-image: url("img/my_background.gif");
    background-position: bottom left;
}

oder auch mit

Code

background: #055578 url("img/sub_back.gif") bottom left;

das Hintergrundbild brav links unten am Ende der Seite (also der HTML-Seite - nicht am Ende des Browserfensters) anzeigte, ignorriert FF 1.5 diese Anwesiung, bzw. stellt das Bild oben links dar.

Fügt man

Code

html, body {
    height: 100%;
}

in die CSS-Datei ein, dann stellt FF 1.5 das Hintergrundbild am Ende des Browserfensters dar. Ist aber die Seite nach unten hin länger und man scrollt an das tatsächliche Ende der Seite, verschwindet das Hintergrundbild nach oben (also es orientiert sich mit seiner Position an der Größe des Browserfensters, nicht an der Länge des Dokuments nach unten hin).

Auch eine zusätzliche CSS-Anweisung:

Code

background-attachement: scroll;

hilft nicht weiter - ebensowenig, wie die Änderung des Doctypes der Seite (von "...html4/loose.dtd" zu "...xhtml...") wie hier im Forum in einem anderen Beitrag schon vorgeschlagen.

Interpretiert der FF 1.5 diese Eigenschaft also falsch? Oder sehr sehr sehr sehr genau/ W3C konform? Und gibt es eine Lösung oder einen Workaround dafür, dass meine Hintergrundbilder dort angezeigt werden, wo sie hin sollen: nämlich ans Ende des Dokumentes (des <body>)???

Ich hoffe, jemand weiß Rat und bedanke mich schonmal im voraus dafür, dass er/ sie mir damit Weihnachten rettet ;-).

Grüße, Joe

allblue

Zitat

Mit background-position: können Sie festlegen, wo die linke obere Ecke der Hintergrundgrafik sein soll. Der erste Wert steht für die horizontale, der zweite für die vertikale Position.

Also dann" left bottom" ... ?

Quelle:
http://de.selfhtml.org/css/eigenschaf…ground_position

Evtl. auch mal mit Pixelangabe versuchen.

Vielleicht hilft's...

jhahn

Hi allblue,

thanx, aber das Umdrehen der Werte hilft leider auch nicht weiter. FF ist's egal, ob da "bottom left" oder "left bottom" steht. Die Grafik wird nach wie vor so angezeigt, wie beschrieben.

Zitat

Evtl. auch mal mit Pixelangabe versuchen.

... geht leider nicht, da ich nicht weiß, wie groß das Browserfenster ist und deshalb nicht die x,y-Werte kenne, die eine Grafik am Fuß des Dokuments positionieren könnten.

Grüße, Joe

Dr. Evil

vllt. noch das:

Code

html, body
{
    height: 100%;
    margin: 0;
    padding: 0;
}

jhahn

Hi Dr. Evil,

leider auch nicht. Außerdem wäre das ein Workaround mit Einschränkungen, da man so ja einem Dokument keine Innenabstände (padding) mehr verpassen könnte.

Frohes Restfest und Grüße, Joe

brain

Die Beschreibung aus SelfHTML erscheint mir sowieso seltsam, denn wenn auf die linke obere Ecke Bezug genommen wird, würde das Hintergrundbild mit "bottom" doch eigentlich unterhalb des Bezugselements liegen (die Oberkante des Bildes liegt an der Unterkante des Bezugselements). Komisch komisch...

MartinH

Die mit "bottom right" eingebundenen Hintergrundbilder auf meiner Internetpräsenz tun's auch im Fx 1.5 noch. Allerdings sind die nicht bei body sondern bei div.
Ich mach' mir heute nicht mehr die Mühe zu untersuchen, was der Unterschied zu Joes Problem ist.

Martin

jhahn

Hallo allerseits,

die Lösung für das background-position Problem (in meinem Fall, wahrscheinlich aber auch in manchen anderen) war, dass ich Seitenelemente (DIV-Container) mit "position: absolute" auf der Seite positioniert hatte.
Diese waren länger als der eigentliche <body>. FF in älteren Versionen hat die background-position im Body-Tag anders interpretiert, als FF 1.5: "background-position: bottom" hieß dort immer am Ende der Seite (beim IE übrigens auch).

Im Grunde interpretiert FF 1.5 das jetzt konsequenter/richtiger: Wenn DIVs absolut positioniert werden, befinden sie sich nicht mehr im BODY-Tag (na ja, im Quelltext schon, nicht aber im Layout ;-)), sondern drüber oder drunter (z-index) und haben daher keinen Einfluss mehr auf die Höhe des BODY.

Dieser schrumpelt auf die eigentliche Höhe seines Inhalts zusammen. In diesem Fall wird ein Hintergrundbild, das mit "background-position: bottom" positioniert wird, zwar wirklich am Fuß des BODY-Elements angezeigt. Da letzteres aber nicht sonderlich hoch ist, erscheint das Bild irgendwo oben oder mitten auf der Seite (aber eben am Ende des BODY-Elements).

HTH. Grüße, Joe