Carlo: background-image wird in NS 7 nicht dargestellt

Hallo,

ich habe folgenden Code geschrieben, um eine Menüleiste mit CSS darzustellen. IE zeigt alles korrekt an, NS 7, Mozilla und Opera schaffen es nicht die Hintergrundbilder der jeweiligen Tabellenzelle darzustellen. Die Textformatierungen werden problemlos umgesetzt. Mache ich irgendetwas falsch? Oder gibt es dafür eine andere Lösung?

html-Seite
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TITEL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="beispiel.css" rel="stylesheet" type="text/css">
</head>
<body>
<table cols=2 width=100% height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <table cols="3" width="200" height="100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
   <!-- Mindesthöhe mit transparenten Bitmap festlegen -->
   <td width="10"><img src="images/space.gif" width="10" height="480" border="0"></td>
   <td width="180" class="menu" valign="top">
   <!-- MENU -->
       <table cols="1" width="180" height="300" border="0" cellspacing="0" cellpadding="0">
        <tr><td height="100" nowrap></td></tr>
         <tr><td align="center" valign="middle" nowrap class="menuItemSelected">Home</td></tr>
              <tr><td align="center" valign="middle" nowrap class="menuItemDefault"><a href="#">Wir über uns</a></td></tr>
       <tr><td align="center" valign="middle" nowrap class="menuItemDefault"><a href="#">Produkte</a></td></tr>
       <tr><td align="center" valign="middle" nowrap class="menuItemDefault"><a href="#">Service</a></td></tr>
       <tr><td align="center" valign="middle" nowrap class="menuItemDefault"><a href="#">Kontakt</a></td></tr>
      </table>
   </td>
   <td width="10"></td>
 </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

beispiel.css - Datei
.menuItemDefault
{
 background-image: url(images/mi_def.png);
 background-repeat: no-repeat;
 background-position: center center;
 background-attachment: fixed;
 height: 25px;
 width: 155px;

text-decoration:none;
 color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
}

.menuItemSelected
{
 background: url(images/mi_sel.png);
 background-repeat: no-repeat;
 background-position: center center;
 background-attachment: fixed;
 height: 25px;
 width: 155px;

text-decoration:none;
 color: #FFFFFF;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
}

Vielen Dank und Gruß,
Carlo

  1. hallo

    <table cols=2 width=100% height="100%" border="0" cellpadding="0" cellspacing="0">

    <img src="images/space.gif" width="10" height="480" border="0">

    diese Sachen könntest du auch per CSS formatieren. (bis auf Height 100%, das gibt's nur im IExplore, ist aber nicht standard)

    table{
    width:100%;
    margin:0;
    padding:0;
    border:0 none;
    }
    img{
    border:0 none;
    }

    und dann so
    <table>
    und
    <img src="images/space.gif" style="width:10px;height:480px;">

    background-image: url(images/mi_def.png);

    das würd ich ändern in

    background-image: url('images/mi_def.png');

    background-position: center center;

    gibt's glaub ich auch nicht

    background-position: 10px 10px;
    oder
    background-position: 0 0;
    wären da richtig, je nach position.

    der IExplore war da wohl ein wenig zu präinnovativ, dass diese sachen beim ihm funktionieren.

    gruss
    HTMLton

    --
    Do it yourselfhtml...
    1. hallo

      table{
      width:100%;
      margin:0;
      padding:0;
      border:0 none;
      }

      sorry, hab soeben gelernt, dass padding nicht in table gehört, sondern in td, folglich:

      td{
      padding:0;
      }

      gruss
      HTMLton

      --
      Do it yourselfhtml...
      1. hi,
        zuerst einmal: Ein Dankeschön an HTMLton für die Antworten. Deine Verbesserungsvorschläge habe ich übernommen.
        Leider wurde mein eigentliches Problem dadurch nicht gelöst. In der CSS-Datei habe ich für die Menüpunkte (Tabellenzellen) eine Grafik zugeordnet.

        .menuItemDefault
        {
        background-image: url('images/mi_def.png');
             ...

        Diese Eigenschaft habe ich in der HTML-Datei wie folgt eingebunden:

        <td align="center" valign="middle" nowrap class="menuItemDefault">Produkte</td>

        Diese Grafiken werden in NS 7, Mozilla und Opera nicht angezeigt. Nur IE zeigt diese Grafiken ohne Probleme an. Woran liegt dies? Kann ich keine Hintergrundgrafiken für einzelne Tabellenzellen verwenden?

        Gruß,
        Carlo

        1. Hallo,
          nimm das "background-attachment:fixed;" raus, der ie kann dieses nur für den <body>
          daher zeigt er deine seite vermeindlich richtig an und die anderen vermeindlich falsch, es ist aber so, dass der ie sie falsch anzeigt.

          Wenn du die seite mal richtig scrollbar machst und nichts anderes stört wird in den anderen browsern auch das hintergrundbild erscheinen wenn du nach unten(rechts?) scrollst, die bilder sind halt fixiert in der mitte.

          hier kannst du den effekt mal nachvollziehen, mit nicht ie browsern:
          http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html

          Gruss, Jan aus Dresden

          1. Besten Dank! Jetzt funktioniert es tadellos!

            Gruß,
            Carlo