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?