[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: 375

28. Nov 2006, 17:30
Beitrag # 1 von 4
Bewertung:
(1375 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:
(1373 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: 375

29. Nov 2006, 09:53
Beitrag # 3 von 4
Beitrag ID: #264279
Bewertung:
(1356 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:
(1350 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

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
05.02.2021 - 05.11.2021

Digicomp Academy AG, Limmatstrasse 50, 8005 Zürich
Freitag, 05. Feb. 2021, 13.00 Uhr - Freitag, 05. Nov. 2021, 17.00 Uhr

Lehrgang

Bilden Sie sich zum zertifizierten Publishing-Multimedia-Profi aus. Neben Fotografie und Video befassen Sie sich mit der Medienproduktion, digitalen Publikationen und dem Webdesign für Desktop- und mobile Endgeräte.

Preis: CHF 10'500.-
Dauer: 30 Tage (ca. 210 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PM

Veranstaltungen
01.03.2021 - 05.03.2021

Persönlichkeitsentwicklung

Online
Montag, 01. März 2021, 00.17 Uhr - Freitag, 05. März 2021, 00.18 Uhr

Webinar

Personal Power Coaching - Um was geht es? ​ Potenzialentfaltung: Potenzial entdecken und entfalten Talente entdecken: Deine Talente und Fähigkeiten erkennen und loslegen Gewohnheiten: schlechte Gewohnheiten durch Positive ersetzen Selbstbewusstsein stärken: Dein Bewusstsein stärken Eigendynamik entwickeln: Mehr Erfolg durch Eigenverantwortung & Disziplin Ängste kontrollieren: Ängste als Antrieb nutzen Entscheidungen treffen: Mit mehr Mut an die Sache ran! Lebensenergie steigern: Deine Lebensenergie steigern und aufrechterhalten Ziele erreichen: Ziele setzen und übertreffen! Motivationssteigerung: Mehr Erfolg durch Selbstmotivation Selbstvertrauen: Selbstvertrauen auf- und ausbauen

Details:
https://www.snfa.ch/swiss-personal-power-birolisik

Ja

Organisator: Birol Isik

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

https://www.snfa.ch/swiss-personal-power-birolisik