Images Won't Show as Link in Internet Explorer

Question

Hi, I am designing a menu bar combining effects with CSS and JavaScript. It is comprised of large icons with text underneath that appears when hovered over. It will be deployed on an intranet so it only has to run in IE 7, 8, and Firefox. Firefox of course seems to perform what I intuitively think the HTML should look like, showing large, block links with a large click area. IE7, however, shows block links that act like links for the Javascript and hover correctly (after I hacked it by adding a transparent background image), but does not provide a finger cursor or follow the href when I click on it.

Interestingly, the link area surrounding the image DOES have the finger cursor, but as soon as I hover the image it turns back to the arrow.

<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;
}

Any help is much appreciated.

-- EDIT -- I solved my problem (I'll post the answer below to fit convention) but I would still like to hear WHY IE does not allow

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

Answer 1

If all you are worried about is the cursor, and the link itself works, you can add it with CSS:

cursor: hand;

Hope this helps!

Answer 2

I solved the problem. I had to remove the SPAN tag around the icons.

Here's my new 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>

I moved some of the CSS in my span tag into the link tag to preserve formatting. Now it works correctly, but I'm still puzzled why the SPAN tag would disable the link.

Answer 3

Make sure your SPAN is not set to BLOCK. Same thing happened to me.