Problem mit background-attachment: fixed

[tim-pong]

Hallo Leute,

ich habe ein Layout mit verschiedenen <div>-Layern, einer davon ist auf overflow: auto gestellt, da der Inhalt oft länger ist, als die Höhe des Layers. Da sich beim scrollen aber der Hintergrund wiederholt, habe ich noch ein background-attachment: fixed in den Style des Layers eingefügt. Im IE (älter als Version 7) funktioniert es auch wunderbar. Nur Mozilla und IE (Version 7) können das irgendwie nicht anzeigen und nehmen das body-hintergrundbild und verschieben irgendwie auch die Breite des Layers.

Hier der CSS-Code:

#baby3-10 {
	position:absolute;
	left:349px;
	top:141px;
	width:675px;
	height:347px;
	background-image:url(images/baby3_10.gif);
	overflow: auto;
	padding-right: 20px;
	background-attachment: fixed;
}

Vielen Dank fürs anschauen,
Tim

 

[Wissenscoder]

kann man sich das Problem online anschauen?

 

[Maik]

Hi,

gibt es eventuell einen Link zur Seite, damit man sich das Problem mal im Ganzen betrachten kann?

 

[tim-pong]

Natürlich.
http://fetteshow.de

 

[Maik]

Bislang kann man nur den Inhalt der Seite und nicht des angesprochenen DIVs scrollen. Pack also dort mehr Inhalt rein, damit die overflow:auto-Eigenschaft überhaupt zum Tragen kommt.

Dass der Firefox das DIV breiter als der IE6 darstellt, liegt daran, dass du das Dokument ohne Doctype-Deklaration im Quirksmodus übergibst, und der IE6 das Boxmodell falsch interpretiert. Denn die Breite der Box setzt sich aus width:675px + padding-right:20px zusammen, und das ergibt eine Boxbreite von 695px, die der Firefox korrekt darstellt - siehe hierzu auch http://www.css4you.de/wsboxmodell/index.html#buh.

 

[tim-pong]

Hier nochmal die Box mit genug Inhalt:

http://fetteshow.de/rockd/music.php?site=bands

 

[Maik]

Ich weiss jetzt nicht, was bei dir falsch läuft, aber bei mir bleibt das Hintergrundbild beim Scrollen des Boxinhalts im Firefox stehen.

 

[tim-pong]

Ja, das stimmt schon.

Aber wenn man mal vergleicht, ist das dort angezeigte Hintergrundbild nicht das, was im CSS-Code difiniert ist. So sollte der Hintergrund aussehen (und tut es auch im IE vor Version 7):

http://fetteshow.de/rockd/images/baby3_10.gif

 

[Maik]

Versuch es mal hiermit:

#baby3-10 {
        position:absolute;
        left:349px;
        top:141px;
        width:675px;
        height:347px;
        background-image:url('images/baby3_10.gif');
        overflow: auto;
        padding-right: 20px;
}

* html #baby3-10 {
        background-attachment: fixed;
}

Da das Hintergrundbild 675px breit ist, solltest du die Breitenangabe für das DIV baby3-10 auf 655px reduzieren, damit die Addition mit padding-right:20px 675px ergibt, sowie einen Dokumenttyp wählen, damit das Dokument nicht im Quirksmodus übergeben wird, und der IE6 das Boxmodell nicht falsch interpretiert.

 

[tim-pong]

Ok, Firefox findet das gut. Aber der IE 7 kommt immer noch nicht mit dem Hintergrundbild zurecht und dort ist jetzt auch der <div>-Layer nicht breit genug...