Hallo,
nachfolgend dank Eurer Hilfe im thread Text mittig neben dem Bild mein Beispiel, das ich um den Hover-Effekt erweitern wollte.
Es funktioniert in den gängigen Browsern, auch IE7 und IE8, aber nicht in IE6 und älter. Dort funktioniert die Anzeige des 2. Bildes nicht und beim Überfahren des Bildes/Textes ändert sich der Cursor nicht zur Hand. Ausserdem flackert der Cursor beim Überfahren des Objekts.
Meine Fragen:
1. Damit es in IE7 funktionierte, musste ich die Zeilen .myIlinks .....
nochmals (unverändert) unter #msie .... angeben.
Warum erkennt der IE nicht die anderen CSS-Angaben?
2. Ist da auch noch ein Hack nötig für IE6 und älter?
Hier das Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
.myIlinks .invers {
display: none;
}
.myIlinks:hover .normal {
display: none;
}
.myIlinks:hover .invers {
display: inline-block;
}
.myIlinks img
{display:inline-block; vertical-align:middle; width:48px; height:40px; border:none;}
.myIlinks span
{display:inline-block; vertical-align:middle;}
#msie .myIlinks img
{zoom:1; display:inline; vertical-align:middle; width:48px;height:40px; border:none;}
#msie .myIlinks span
{zoom:1; display:inline; vertical-align:middle;}
#msie .myIlinks .invers {
display: none;
}
#msie .myIlinks:hover .normal {
display: none;
}
#msie .myIlinks:hover .invers {
display: inline;
}
-->
</style>
</head>
<body>
<!--[if lt IE 8]><div id="msie"><![endif]-->
<p>
<a class="myIlinks" href="http://www.example.com">
<span class="normal"><img src="img1.gif" alt ="">Normalansicht</span>
<span class="invers"><img src="img2.gif" alt ="">Hoveransicht</span>
</a>
</p>
<!--[if lt IE 8]></div><![endif]-->
</body>
</html>
Betr. Doppelposting: Diese Fragen hatte ich noch im o.g. posting gestellt, aber ich denke, dass dies
1. eine ganz andere Themenstellung ist und dass
2. es niemand mehr liest, da das Problem gelöst war.
Vielen Dank für Eure Hilfe und Nachsicht
Benni