Rollover only works on the border in internet explorer but works fine in all other browsers

Question

I created an aerial map and on specific areas I created a rollover, meaning when you rollover an the image of exp. a house a picture of the house pops up in bigger. It works really well in all browsers..... but in Internet explorer. In internet explorer nothing rolls over. but when I put a border, it does rollover but only when the mouse is on the border. I do not want the border there. I want it to rollover when teh mouse is on the area How can I solve this issue just for internet explorer.
Below is my coding i used:
In HTML:
<div class="map">
<img src="Img/map-of-area.png">
<div class="maparea">
<a class="volley" href="htmlmainhouse.html"> <span> <img src="Img/photos/map/fields.JPG" width="170" height="130" alt="sample" border="0"  /></span> </a>
</div>
</div>
In CSS:
a.volley{
/* border: 2px solid red; */
height: 35px;
width: 90px;
position:absolute;
top: 310px;
left: 275px;
z-index:20; 
a.volley { 
display:inline; 
z-index:30; 
a.volley span { 
display:none; 
a.volley:hover span { 
display:block; 
position:absolute; 
top:1em; 
left:1em; 
width:64px; 
height:64px; 

Answer 1

For rollovers on image maps, you'll get better cross-browser results with JavaScript functions.  See link for details:
http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479771/So-You-Want-An-Imagema p-Image-Flip-Huh.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb