[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:
(1393 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?

Gruß von Eckhard
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:
(1391 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:
(1374 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?

Gruß von Eckhard


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:
(1368 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

Aktuell

PDF / Print
Wolken_300

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/