Firefox stellt Hintergrundbild nicht dar

[Desmond Kabus]

Ich habe mir für eine Webseite ein Design ausgedacht und bin auf ein Problem gestoßen, dass ich nicht alleine bewältigen konnte. Ich habe mich schon durch fast alle Seiten von Selfhtml durchgeklickt und keine Lösung gefunden.

Das Problem:
Ich habe ein auf CSS basierendes Design mit dem Internet Explorer entwickelt und es erfolgreich mit Opera getestet.
Firefox zeigt aber nicht einen Hintergrund an, in diesem Falle ein Bild von ein paar Blumen.
Der Hintergrund ist der eines div-Bereichs, in dem einige andere div-Bereiche platziert sind. Man müsste den Hintergrund noch sehen, da die sich darin befindlichen div-Bereiche ein transparentes Hintergrundbild haben.
Stattdessen sieht man den Hintergrund des Body.

Kann mir jemand helfen?

Link zur Testseite des Designs
Link zum CSS-Design
Link zu den Korrekturen für den IE

[ChrisB]

Hi,

Das Problem:
Ich habe ein auf CSS basierendes Design mit dem Internet Explorer entwickelt und es erfolgreich mit Opera getestet.

Das Problem ist der Quirks Mode, in dem diese beiden Browser deinen Verständnisfehler derart ausgleichen, dass du das gewünschte Ergebnis bekommst.

Firefox zeigt aber nicht einen Hintergrund an, in diesem Falle ein Bild von ein paar Blumen.
Der Hintergrund ist der eines div-Bereichs, in dem einige andere div-Bereiche platziert sind. Man müsste den Hintergrund noch sehen, da die sich darin befindlichen div-Bereiche ein transparentes Hintergrundbild haben.

Nein, man müsste den Hintergrund nicht sehen - dafür ist das Element nicht ausreichend hoch genug, und das wiederum liegt daran, dass du so gut wie alle Inhalte gefloatet hast, ohne das irgendwie wieder zu kompensieren.

Lies bitte http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout aufmerksam durch - da wird alles erklärt, was du wissen muss.

MfG ChrisB

[Felix Riesterer]

Lieber ChrisB,

kannst Du etwa auch nicht schlafen?

Liebe Grüße,

Felix Riesterer.

[Desmond Kabus]

Schon mal danke,
leider funktioniert die Browserweiche

  
<!--[if IE]>  
  <style type="text/css">@import url(cssie.css);</style>  
<![endif]-->  

leider nicht mehr...
Wie kann ich das beheben??

Desmond Kabus

[Gunnar Bittersmann]

@@Desmond Kabus:

nuqneH

leider funktioniert die Browserweiche […] leider nicht mehr...

Eine Problembeschreibung „funktioniert nicht mehr“ hat noch nie funktioniert. Leider leider.

Im Übrigen ist das Einbinden von Stylesheets per '@immport' in 'style' nicht sinnvoll. [PERFORMANCE-BP1]

Und ein zusätzliches Stylesheet für IE auch nicht. Gib die nötigen Anpassungen in dem einen Stylesheet für alle Browser an: '* html' für IE < 7 (falls die überhaupt noch unterstützt werden sollen); '*+html' ('*:first-child+html') für IE 7. Hat der 8er noch Anpasungen nötig?

Qapla'

[Desmond Kabus]

Das Design funktioniert jetzt einwandfrei!
Danke für eure Hilfe!

[Felix Riesterer]

Lieber Desmond,

Das Problem:
Ich habe ein auf CSS basierendes Design mit dem Internet Explorer entwickelt

merke: Zum Entwickeln kann man den IE nicht gebrauchen, nur zum "bugfixen", wenn er in der Darstellung wieder einmal nicht spurt. Dieser Satz gilt bis Version 8 uneingeschränkt.

und es erfolgreich mit Opera getestet.

Leider nennst Du weder beim IE noch bei Opera Versionsnummern. Daher sind Deine Aussagen relativ wertfrei.

Firefox zeigt aber nicht einen Hintergrund an

Hier der von Dir (inline!) verwendete CSS-Code:

div {  
    background: white URL(http://file1.npage.de/006584/55/bilder/blumen.jpg) top center no-repeat;  
}

Demgegenüber steht folgende CSS-Anweisung in Deinem externen Stylesheet:

div#Rahmen {  
    width: 760px;  
    margin: 0 auto;  
    padding: 0;  
    border: 1 solid black; /* Fälschlicherweise ohne Einheitenangabe! */  
    border-top: 0px;       /* Hier dürfte die px-Einheit sogar fehlen. */  
    text-align: left;  
    background: white;  
}

Diese Anweisung wird zum Teil von deinen Inline-Styles überschrieben, nämlich mit dem Hintergrundbild. Wenn man dem <div>-Element eine feste Höhe gibt (es hat im FF eine automatische Höhe von 25px!), dann wird das Bild auf der Seite tatsächlich angezeigt! Warum mir Firebug (das zum Entwickeln im FF unerlässliche Add-On!) allerdings das Bild nicht anzeigt, verstehe ich jetzt zwar nicht, ist aber auch egal.

Mir fällt auch auf (etwas, das im IE und anscheinend auch Opera stillschweigend korrigiert wird), dass die fehlende Einheit bei Deiner border-Anweisung im FF zu keinem Rahmen für div#Rahmen führt. Du möchtest nach der eins noch "px" ergänzen.

Man müsste den Hintergrund noch sehen, da die sich darin befindlichen div-Bereiche ein transparentes Hintergrundbild haben.

Nein, wenn der Bereich zu klein (height!) geraten ist. Warum Opera und der IE ihn künstlich "aufblasen" liegt vermutlich daran, dass Du Deinem Dokument keinen Doctype spendiert hast (warum eigentlich nicht?) und beide Browser in den sogenannten Murksmodus (heißt in Wirklichkeit Quirksmode) schalten, um Deine Angaben irgendwie(!) umzusetzen. Dass bei "irgendwie" hier Murks herauskommt, darf also nicht überraschen. Da Dein Code aber sehr nach XHTML1.0 aussieht, solltest Du einen passenden Doctype ohne Probleme hinzufügen können (und damit Dein Dokument auch sinnvoll validieren können.

Kann mir jemand helfen?

Das Hinzufügen einer geeigneten Höhe habe ich Dir ja schon angeraten. Darüberhinaus will ich Dir dringendst ans Herz legen, dass Du von nun an eben _nicht_ mehr mit dem IE entwickelst, denn er hat so manche Fehlerkorrekturen (z.B. Höhe Deines <div>), die in anderen Browsern nicht greifen, und darüber hinaus ist er vor Version 9 nicht genügend standardkonform. Da ist es zwingend besser, im Firefox (mit dem Firebug Add-On!!) zu entwickeln. Ohne den Firebug wüsste ich heute wirklich nicht was ich täte.

Ja, Opera hat nun wohl mit Dragonfly für seinen Browser ein Pendant zum Firebug entwickelt. Wenn der Opera-Browser aber im Quirksmode sich wie der IE verhält, dann nützt Dir das aber auch wenig, wenn Du Fehler finden willst.

Gerade habe ich auf http://getfirebug.com gelesen, dass Du den Firebug auch im IE nutzen kannst, wenn Du FireBug Lite in Deine Seite implementierst. Vielleicht kann Dir das helfen, im IE so manchen Unterschied in der Darstellung zu finden? Spätestens wenn Du mit JavaScript entwickelst, wird Dir Firebug zum unersetzlichen Tool... aber das ist vielleicht jetzt nicht wichtig.

Liebe Grüße,

Felix Riesterer.