imagehover

[Peter]

Liebe SelfHTML Gemeinde,
Es giebt mal wieder komplikationen zwischen Firefox und IE.
Ich will ein Imagehover für mein Menue machen. Bei Firefox klappts, beim IE jedoch wie immer nicht. Hoffe ihr könnt mir helfen.

div.tablediv { height:22px; width:140px; background-image:url(meta.gif); }
div.tablediv:hover { height:22px; width:140px; background-image:url(meta_hover.gif); }

<a href="ff.html"><div class="tablediv">&nbsp;</div></a>

[Cheatah]

Hi,

div.tablediv:hover

der IE beherrscht nach wie vor nicht viel mehr als das anno 1998 abgelöste CSS/1.0, also :hover nur bei Links,

<a href="ff.html"><div class="tablediv">&nbsp;</div></a>

und dieser HTML-Code ist grob fahrlässig.

Cheatah

[Peter]

:/

Also warum mein code grob fahrlässig ist würde ich gerne wissen.
Da ich nicht will das die IE User meinen schönen hover effekt vermissen müssen, giebt es noch eine andere Lösung?

Peter

[Zeromancer]

Hallo Peter,

Also warum mein code grob fahrlässig ist würde ich gerne wissen.

das a-Element darf keine Blockelemente (Div) enthalten.

Da ich nicht will das die IE User meinen schönen hover effekt vermissen müssen, giebt es noch eine andere Lösung?

Schau mal bitte unter https://forum.selfhtml.org/?t=102198&m=628215

Mit freundlichen Grüßen

André

[Jan L.]

Hallo,

Also warum mein code grob fahrlässig ist würde ich gerne wissen.

Blockelemente wie <div> sind innerhalb von <a>...</a> nicht erlaubt.

Was passiert eigentlich, wenn der Client keine Grafiken anzeigen kann, bei
deinem Code? Bekommt der Besucher dann überhaupt keinen Link zu sehen? Ich
würde hierzu wohl eine normale Grafik verwenden, dieser ein sinnvolles
alt-Attribut spendieren und den Bildwechsel mit Javascript realisieren.

Gruß, Jan

[Axel Richter]

Hallo,

Ich will ein Imagehover für mein Menue machen. Bei Firefox klappts, beim IE jedoch wie immer nicht. Hoffe ihr könnt mir helfen.

div.tablediv:hover

Der IE wendet das Pseudoformat :hover nur auf A-Elemente an. Die Klasse .tablediv sieht so aus, als wolltest Du in das DIV eine Tabelle stellen? Wenn ja, dann funktioniert das hover nur mit CSS im IE nicht.

<a href="ff.html"><div class="tablediv">&nbsp;</div></a>

Das ist fehlerhaftes HTML. Ein A-Element darf kein DIV-Element enthalten, auch keine Tabelle, nur %inline-Inhalt http://www.w3.org/TR/html4/struct/links.html#h-12.2.

Wenn da allerdings nur Text rein muss, dann würde:
...
a, a:link, a:active, a:visited, a:focus {display:block; width:10em; background-image:url(meta.gif);}
a:hover {background-image:url(meta_hoer.gif);}
...
<a href="ff.html">Text</a>
...

funktionieren.

viele Grüße

Axel