Ich habe eine Web-Site im CSS-Layout erstellt.
Dem Content-Layer möchte ich je nach Seitenthema ein Hintergrundbild zuweisen.
Also habe ich in der main.css die ID für #content definiert und je eine Klasse für die verschiedenen Hintergrundbilder (z.B.: .notesbg) erstellt:

Auszug aus der main.css:

#content
{
visibility: visible;
position: absolute;
top: 190px;
left: 210px;
width: 580px;
height: 318px;
overflow: auto;
clip: rect(auto, auto, auto, auto);
scrollbar-3dlight-color: #ececec;
scrollbar-arrow-color: #903;
scrollbar-darkshadow-color: #cccccc;
scrollbar-face-color: white;
scrollbar-shadow-color: #cccccc;
scrollbar-track-color: white
}

.notesbg
{
background-image: url(../pics/bgnotes.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom
}

Im Quellcode habe ich dem Content-Layer die gewünschte Klasse zugewiesen:

<div id="content" class="notesbg">
<h1>HEADLINE</h1>
<p>Text
</div>

Im InternetExplorer6 und Opera9 wird die Seite wie geplant mit Hintergrundbild angezeigt, Mozilla, Firefox2 und Netscape7 hingegen streiken: Das Bild wird bruchstückhaft sonstwo im Layer angezeigt!

Dabei nahm ich an, dass gerade diese die CSS-Anweisung verstehen.
Wo steckt der Fehler?
Liegt es am overflow?


Und noch etwas:
Warum meckert der CSS-Validator über die scrollbars?
Ich weiß, gibt's offiziell nicht (nur für MS-Browser) – aber gleich ein Fehler? Wo bleibt die Toleranz? Denn mindestens im IE werden die Scroll-Balken "schön bunt" dargestellt!
Oder gibt es eine CSS-Definition, die allgemein korrekt ist und für alle Browser gültig ist?

Gruß von Eckhard

Hallo Ecki,

versuchs mal so:

#content
{
visibility: visible;
position: absolute;
top: 190px;
left: 210px;
width: 580px;
height: 318px;
overflow: auto;
clip: rect(auto, auto, auto, auto);
}

.notesbg
{
background-image: url(../pics/bgnotes.jpg);
background-repeat: no-repeat;
background-position: right bottom
}

>> Warum meckert der CSS-Validator über die scrollbars?

Weil das ungültige CSS-Angaben sind.
Es gibt keinen gültigen Code, der die Scrollbalken einfärbt.

Gruß Sabine

Danke Sabine,

so geht's. Allerdings ist das Verhalten jetzt im IE beim scrollen etwas anders:
Der Hintergrund wird zunächst ordentlich unten rechts angezeigt. Wenn ich den Scrollbalken anfasse, verschwindet das Hg.bild und erscheint erst wieder am Scrollseitenende. Aber damit kann ich leben.

Nun habe ich auch in einem schlauen CSS-Buch gelesen, dass "background-attachment: fixed" zu Anzeigeproblemen führen kann, wenn es für andere Elemente als body verwendet wird. Nun ja – ist aber auch kompliziert mit diesen Ausnahmen.

Und die scrollbar-Fehlermeldungen ignoriere ich einfach. Tut ja keinem weh – oder?

Gruß von Eckhard

>> Tut ja keinem weh – oder?

Ich kenne bisher keinem Browser den die Angaben für farbige Scrollbalken stören.

Gruß Sabine