✔ css hover IE vs. Firefox

[Remme]

Hi, ich finde den Fehler nicht vielleicht könnt ihr mir sagen woran es liegen könnte.

css

.navi {
background:url(images/normal.jpg)
}
.navi:hover {
background:url(images/auf.jpg)
}

HTML

  <tr>
    <td height="20" width="100%" class="navi">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.php">Home</a></td>
  </tr>

Im Mozilla Firefox funtioniert es einwandfrei. Nur im IE 6 wechselt das Hintergrundbild nicht. Liegt es an mir oder muss ich für IE etwas zustätzlich eingeben


MFG
Remme

 

[BabyMitSchnully]

heißt das nicht eigentlich background-image:url(....)

 

[Remme]

Geht beides, hab mal eben beide Varianten versucht tut sich trotzdem nichts.

 

[BabyMitSchnully]

ach warte mal. Klar. Da musst nen display mit angeben. Dann gehts. Also folgendes

display: block;

Bau das mal damit rein. Dann sollte es gehen.

 

[Remme]

Also ich dachte schon das es nicht an display: block; liegt, weil wenn ich es in die css bei beiden oder nur bei einem wird das jeweilige Bild gar nicht angezeigt.

Zum verrückt werden... Immer nur Porbleme mit IE.

 

[BabyMitSchnully]

Jap. Dann wird es nicht angezeigt, weil keine width: und height: angaben drin sind Bau die mal mit ein.

 

[Remme]

Also dann so ...

css

<style type="text/css">
.navi {
background:url(images/normal.jpg);
display:block;
width:241;
height:20
}
.navi:hover {
background:url(images/auf.jpg);
display:block;
width:241;
height:20
}
</style>

HTML

  <tr>
    <td height="20" width="100%" class="navi">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.php">Home</a></td>
  </tr>

Aber geht dann bei IE immer noch nicht

 

[BabyMitSchnully]

ja. Aber ich habe gerade mal ein wenig rumprobiert. Du musst das auf den Link machen. Also so. So funktioniert es bei mir. Das rote habe ich bei mir geändert. Achte unten auf den HTML Code. Da muss das class in den Link rein.

css​

<style type="text/css">
a.navi {
background:url(images/normal.jpg);
display:block;
width:241;
height:20
}
a.navi:hover {
background:url(images/auf.jpg);
display:block;
width:241;
height:20
}
</style>

html​

 <tr>
    <td height="20" width="100%" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="navi" href="index.php">Home</a></td>
  </tr>

 

[Maik]

ich finde den Fehler nicht vielleicht könnt ihr mir sagen woran es liegen könnte.

Im Mozilla Firefox funtioniert es einwandfrei. Nur im IE 6 wechselt das Hintergrundbild nicht

Der IE6 unterstützt die :hover-Pseudoklasse lediglich für das a-Element (-> a:hover).

 

[hela]

... und außerdem:

• Bei den Breiten- und Höhenwerten fehlen die Maßeinheiten (px)
• Du solltest dich entscheiden, ob die Tabellenzelle 100% oder 241px breit sein soll.

Versuch es mal damit:

<style type="text/css">
td.navi {
    width: 241px;
    height: 20px;
}
td.navi a {
    display: block;
    width: 241px;
    height: 20px;
    background: url(images/normal.jpg);
}
td.navi a:hover {
    background: url(images/auf.jpg);
}
</style>

<tr><td class="navi"><a href="index.php">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</a></td></tr>