Benni: Text mittig neben Bild

Beitrag lesen

Hallo,
ich habe jetzt dank Eurer Hilfe das Beispiel fertig, erweitert um den Hover-Effekt.
Es funktioniert in den gängigen Browsern auch IE7, aber nicht in IE6 und älter. Dort funktioniert weder der link noch das Hover.
Meine Fragen:
1. Damit es in IE7 funktionierte, musste ich die Zeilen a.myIlinks .....
   nochmals unter #msie .... angeben.
   Warum erkennt der IE nicht die anderen CSS-Angaben?
2. Was für ein Hack ist jetzt noch 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">  
<!--  
a.myIlinks .invers {  
    display: none;  
}  
a.myIlinks:hover .normal {  
    display: none;  
}  
  
a.myIlinks:hover .invers {  
    display: block;  
}  
.myIlinks img  
  {display:inline-block; vertical-align:middle; width:48px; height:40px; border:none;}  
  
.myIlinks span  
  {display:inline-block; vertical-align:middle;}  
.myIlinks .Legende h1  
  {margin:0;}  
.myIlinks .Legende p  
  {margin-bottom:0;}  
#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 a.myIlinks .invers {  
    display: none;  
}  
#msie a.myIlinks:hover .normal {  
    display: none;  
}  
#msie a.myIlinks:hover .invers {  
    display: block;  
}  
  
-->  
</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>