Mozilla Firefox und background-position:center;
Christian Bruckhoff
- css
Hallo.
Folgendes Problem:
Die Seite http://www.die-heinzelmaenchen.de läd im linken Frame ein Bild, dieses sollte im Frame zentirert sein. Verwendet wird dafür CSS.
body.picbar {
background-color:#ECECEC;
color:#000000;
text-align:left;
margin:30px;
background-position:center;
background-attachment:scroll;
background-repeat:no-repeat;
}
Mit dieser Einstellung läd Mozilla Firefox das Bild jedoch so, dass es nur halb zu sehen ist. Wie kann ich diesen Fehler beheben?
MfG
Christian Bruckhoff
Hi,
Die Seite http://www.die-heinzelmaenchen.de
ist noch nicht hochgeladen.
Deine ist wohl die ohne den Tippfehler ...
läd im linken Frame ein Bild, dieses sollte im Frame zentirert sein. Verwendet wird dafür CSS.
Mit dieser Einstellung läd Mozilla Firefox das Bild jedoch so, dass es nur halb zu sehen ist.
Ja, erstaunlich. Ich hätte im ersten Moment erwartet, daß von dem Bild nichts zu sehen ist - schließlich ist die Höhe 0, plus padding von 2 mal 0, plus border-width von 2 mal 0 macht 0. Der Bereich für das Hintergrundbild sollte also eine Höhe von 0 haben.
Aber: für HTML wird das Hintergrundbild von body im Viewport angezeigt.
Da body einen margin-top von 30px hat, müßte sich das Zentrum des Bildes 30px (plus halbe Höhe von Body, die aber, s.o., 0 ist) unterhalb der Frame-Oberkante befinden.
Sichtbar sind ca. 190px, davon 30px weg für den margin-top, bleiben 160px. Mal zwei, sollte eine Bildhöhe von 320px ergeben.
Hm. tatsächlich ist das Bild 350px hoch.
Ich vermute, daß die Abweichung irgendwie mit den collapsing margins zusammenhängt.
Wie kann ich diesen Fehler beheben?
Der body sollte eine von 0 deutlich abweichende Höhe bekommen (100% bieten sich an ...)
cu,
Andreas
Hi,
Die Seite http://www.die-heinzelmaenchen.de
ist noch nicht hochgeladen.
Deine ist wohl die ohne den Tippfehler ...
läd im linken Frame ein Bild, dieses sollte im Frame zentirert sein. Verwendet wird dafür CSS.
Mit dieser Einstellung läd Mozilla Firefox das Bild jedoch so, dass es nur halb zu sehen ist.
Ja, erstaunlich. Ich hätte im ersten Moment erwartet, daß von dem Bild nichts zu sehen ist - schließlich ist die Höhe 0, plus padding von 2 mal 0, plus border-width von 2 mal 0 macht 0. Der Bereich für das Hintergrundbild sollte also eine Höhe von 0 haben.
Aber: für HTML wird das Hintergrundbild von body im Viewport angezeigt.
Da body einen margin-top von 30px hat, müßte sich das Zentrum des Bildes 30px (plus halbe Höhe von Body, die aber, s.o., 0 ist) unterhalb der Frame-Oberkante befinden.
Sichtbar sind ca. 190px, davon 30px weg für den margin-top, bleiben 160px. Mal zwei, sollte eine Bildhöhe von 320px ergeben.
Hm. tatsächlich ist das Bild 350px hoch.
Ich vermute, daß die Abweichung irgendwie mit den collapsing margins zusammenhängt.Wie kann ich diesen Fehler beheben?
Der body sollte eine von 0 deutlich abweichende Höhe bekommen (100% bieten sich an ...)
Hi und Danke!
So, habe jetzt mal margin: 0px und paddign 0px gesetzt. Dann noch height und width auf 100%, aber es hat sich nichts verändert. :-(
Hast du da ne Idee?
MfG
Christian