Bilder werden nicht als Link im Internet Explorer angezeigt

Question

Ich entwerfe eine Menüleiste, die Effekte mit CSS und JavaScript kombiniert. Es besteht aus großen Symbolen mit darunter befindlichem Text, die angezeigt werden, wenn man über sie hinweggeht. Es wird in einem Intranet bereitgestellt, sodass es nur in IE 7, 8 und Firefox ausgeführt werden muss. Firefox scheint natürlich das zu tun, was ich intuitiv für den HTML-Code halte, und zeigt große, blockweise Links mit einem großen Klickbereich. IE7 zeigt jedoch Block-Links, die wie Links für das Javascript funktionieren und korrekt schweben (nachdem ich es durch Hinzufügen eines transparenten Hintergrundbildes gehackt habe), aber keinen Fingercursor bereitstellen oder dem href folgen, wenn ich darauf klicke.

Interessanterweise hat der Linkbereich um das Bild den Fingercursor, aber sobald ich das Bild schwebe, wird wieder der Pfeil angezeigt.

<div id="navigation">   
<ul> 
<li><a href="#" onMouseOver="vtoggle('txtHome');" onMouseOut="vtoggle('txtHome');"> 
<span class="icon"><img src="iconImage.png" alt="Home" /></span> 
<span class="icontxt" id="txtHome" style="visibility:hidden;">Home</span> 
</a></li> 
... 
</ul> 
</div> 

<script type="text/javascript"> 
function vtoggle(x) { 
    if (document.getElementById(x).style.visibility == 'hidden') { 
     document.getElementById(x).style.visibility = 'visible'; 
    } else { 
     document.getElementById(x).style.visibility = 'hidden'; 
    } 
} 
</script> 


#navigation{ 
margin:0px auto; 
padding:0px; 
padding-left:10px; 
height:64px; 
list-style:none; 
} 
#navigation li{ 
float:left; 
clear:none; 
list-style:none; 
} 
#navigation li a, #navigation li a:link{ 
color:#fff; 
display:block; 
font-size:12px; 
text-decoration:none; 
padding:8px 18px; 
margin:0px; 
margin-left:-20px; 
width:80px; 
height:64px; 
background:url(../images/transparent.gif); 
} 
#navigation li a:hover{ 
background:url(../images/glow.png); 
background-repeat:no-repeat; 
background-position:10px -2px; 
} 
.icon{ 
float:left; 
width:100%; 
text-align:center; 
} 
.icontxt{ 
float:left; 
font-size:10px; 
color:white; 
font-weight:bold; 
clear:left; 
text-align:center; 
width:100%; 
margin-top:-1px; 
} 

Jede Hilfe wird sehr geschätzt.

- EDIT - ich mein Problem gelöst (Ich werde die Antwort unten schreiben Konvention passen), aber ich würde immer noch zu hören, wie, warum IE nicht

<a href="#"><span><img /></span></a> 

Answer 1

Ich löste das Problem. Ich musste den SPAN-Tag um die Symbole entfernen.

Hier ist mein neuer HTML-Code:

<li><a href="#" onMouseOver="vtoggle('txtHome');" onMouseOut="vtoggle('txtHome');"> 
<img src="images/webapp48/profile.png" alt="Home" /> 
<span class="icontxt" id="txtHome" style="visibility:hidden;">Home</span> 
</a></li> 

ich einige der CSS in meinem span-Tag in den Link-Tag bewegte Formatierung zu bewahren. Jetzt funktioniert es richtig, aber ich bin immer noch verwirrt, warum das SPAN-Tag die Verbindung deaktivieren würde.

Answer 2

erlaubt Wenn alles, was Sie sind besorgt etwa ist der Cursor, und der Link selbst funktioniert, können Sie es mit CSS hinzufügen:

cursor: hand; 

Hope this hilft!

Answer 3

Stellen Sie sicher, dass Ihr SPAN nicht auf BLOCK eingestellt ist. Das Gleiche ist mir passiert.