[GastForen Web allgemein HTML und CSS / Stylesheets Problem mit CSS: background-image / -position in Mozilla

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Problem mit CSS: background-image / -position in Mozilla

Ecki
Beiträge gesamt: 378

28. Nov 2006, 17:30
Beitrag # 1 von 4
Bewertung:
(1449 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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?
X

Problem mit CSS: background-image / -position in Mozilla

SabineP
Beiträge gesamt: 7586

28. Nov 2006, 18:26
Beitrag # 2 von 4
Beitrag ID: #264222
Bewertung:
(1447 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#264208]

Problem mit CSS: background-image / -position in Mozilla

Ecki
Beiträge gesamt: 378

29. Nov 2006, 09:53
Beitrag # 3 von 4
Beitrag ID: #264279
Bewertung:
(1430 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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?


als Antwort auf: [#264222]

Problem mit CSS: background-image / -position in Mozilla

SabineP
Beiträge gesamt: 7586

29. Nov 2006, 12:45
Beitrag # 4 von 4
Beitrag ID: #264341
Bewertung:
(1424 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> Tut ja keinem weh – oder?

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

Gruß Sabine


als Antwort auf: [#264279]
X