Thorsten Reichelt: NN4 & Opera6 zeigen keinen CSS Hintergrund in <TD> an.

Hallo!

Ich habe ein Problem mit dem NN4.7, dem 6.2, dem Opera6 und meinem CSS. Das Problem wurde hier zwar schon öfters behandelt, eine Lösung konnte ich jedoch nicht finden. Folgendes Problem:

Ich will meine Website von Frames auf Tabellen umstellen. Dafür habe ich mir folgende Tabelle erstellt (vereinfacht):

<TABLE width="100%" height="100%">
<TR>
 <TD ROWSPAN="2" class="bgmenu" width="190" align="left" valign="top" height="100%">
  <img src="images/blank.gif" width="190" height="110"><br>
  <? include ('menu_de.php'); ?>
 </TD>
 <td background="images/oben.jpg" height="156" width="100%"> </td>
</TR>
<TR>
 <TD bgcolor="#000000" align="left" valign="top" height="100%" width="100%">
  <div align="center"><img src="images/logo2.jpg" width="419" height="451"></div>
 </TD>
</TR>
</TABLE>

Im Stylesheet steht:

.bgmenu{
 background-repeat: no-repeat;
 background-image : url(images/menu.jpg);
 background-color : Black;
}

Normalerweise sollte jetzt in der linken Tabellenspalte das Hintergrundbild erscheinen. Das funktioniert auch super mit dem IE6. Nur alle Netscapes (auch der 6er) und Opera6 zeigen nur einen schwarzen Hintergrund an. Das Bild fehlt also komplett.

Eventuell bin ich ja auch nur zu blöd.

Kann mir trotzdem jemand genau erklären wo der Fehler liegt?

Vielen Dank.

Gruß
  Thorsten

  1. Im Stylesheet steht:

    .bgmenu{
    background-repeat: no-repeat;
    background-image : url(images/menu.jpg);
    background-color : Black;
    }

    Normalerweise sollte jetzt in der linken Tabellenspalte das Hintergrundbild erscheinen. Das funktioniert auch super mit dem IE6. Nur alle Netscapes (auch der 6er) und Opera6 zeigen nur einen schwarzen Hintergrund an. Das Bild fehlt also komplett.

    nachdem sich alle Browsyer gleich verhalten (außer IE) ist also die Frage eher, wieso der IE das Bild findet.. Wenn es nicht ingendein Tippfehler ist, würde ich mal versuchen das background-image UNTER background-color zu setzen. Ansonsten kann ICH da keinen Fehler finden

    1. Hallo !!

      nachdem sich alle Browsyer gleich verhalten (außer IE) ist also die Frage eher, wieso der IE das Bild findet.. Wenn es nicht ingendein Tippfehler ist, würde ich mal versuchen das background-image UNTER background-color zu setzen. Ansonsten kann ICH da keinen Fehler finden

      Sooo, es funktioniert jetzt. Aber nicht ganz so wie ich es wollte.
      Was ich vergesseb habe zu sagen war, die CSS Datei liegt im Unterverzeichnis 'css' und wird per <LINK rel="stylesheet" href="css/styles.css" type="text/css"> eingebunden. Ich habe jetzt die styles.css in das selbe Verzeichnis bis die HTML-Datei kopiert und den <LINK> angepasst. Jetzt funktioniert das Hintergrundbild in allen Browsern.

      Versteh ich nicht. Eventuell ist es ja schon zu spät.
      Aber wo soll der Unterschied sein ob die styles.css im css Verzeichnis liegt oder im Hauptverzeichnis zusammen mit dem HTML Dokument?

      Ich habe ja vorher auch schon einmal aus dem url(images/menu.jpg) ein url(../images/menu.jpg) gemacht. Hatte aber auch nicht funktioniert.

      Auf jeden Fall sieht die styles.css jetzt so aus:

      .bgmenu{
       background-image: url(images/menu.jpg);
       background: url(images/menu.jpg) no-repeat;
       background-repeat: no-repeat;
      }

      Das fass ich jetzt nicht mehr an.
      Es sei denn, jemand hat eine Idee wie ich die Datei wieder in den css Ordner verscheiben kann ohne die Funktion zu verlieren.

      Gruß
        Thorsten

      1. Moin!

        Was ich vergesseb habe zu sagen war, die CSS Datei liegt im Unterverzeichnis 'css' und wird per <LINK rel="stylesheet" href="css/styles.css" type="text/css"> eingebunden. Ich habe jetzt die styles.css in das selbe Verzeichnis bis die HTML-Datei kopiert und den <LINK> angepasst. Jetzt funktioniert das Hintergrundbild in allen Browsern.

        Was ich noch als fehlend ansehen würde, sind die fehlenden Anführungszeichen um die Bild-URL:

        background: url('images/bild.gif');

        Und dann:

        Warum definierst du doppelt? Die Angaben unter background-image und background-repeat lassen sich prima (und in allen CSS-fähigen Browsern) in der Angabe background zusammenfassen. Die Einzelangaben können also ersatzlos entfallen.

        Und Punkt drei: Du hast ein Problem mit der Bild-URL. Netscape 4 betrachtet die als relativ zur HTML-Datei, während der Standard ist (= alle anderen Browser), die Bild-URL relativ zum CSS zu sehen. Dir bleibt also vermutlich nichts anderes übrig, als entweder absolute Pfadnamen zu verwenden, oder das Bild an zwei Positionen im Verzeichnisbaum zu halten.

        - Sven Rautenberg

        1. Hallo !

          Was ich noch als fehlend ansehen würde, sind die fehlenden Anführungszeichen um die Bild-URL:

          background: url('images/bild.gif');

          Mmmm, sind die vorgeschrieben?
          Ich habe das CSS mit dem "TopStyle Lite" Editor erstellt der bei Hoemsite dabei ist. Der macht diese ' nicht.

          Warum definierst du doppelt? Die Angaben unter background-image und background-repeat lassen sich prima (und in allen CSS-fähigen Browsern) in der Angabe background zusammenfassen. Die Einzelangaben können also ersatzlos entfallen.

          Das werde ich auch einmal ausprobieren. Danke.

          Und Punkt drei: Du hast ein Problem mit der Bild-URL. Netscape 4 betrachtet die als relativ zur HTML-Datei, während der Standard ist (= alle anderen Browser), die Bild-URL relativ zum CSS zu sehen.

          So etwas habe ich schon befürchtet. Ich werde dann wohl das .bgmenu direkt in die HTML Dateien einbauen. Nur wegen dem NN4 kann ich doch nicht meine ganze Struktur umbauen.

          Gibt es irgendwo eine Übersicht über all die Sachen die der NN4 anders macht als alle anderen Browser?

          Gruß
            Thorsten

    2. NACHTRAG

      würde ich mal versuchen das background-image UNTER background-color zu setzen.

      Das werde ich noch mal ausprobieren. Darauf habe ich jetzt nicht geachtet. Aber da in meinem neuen Stylesheet die Reihenfolge zufällig eine andere ist.....