Divs on top of image dont work well in IE ?

[lonewolf217]

I was playing around with an image map of sorts using CSS and Divs rather than the typical HTML map.

 

I had my image, along with several DIVs

<image src="\images\mainlab.gif" border=0 width=100% height=100%>
<div class="row1" id="1-0"></div> 
<div class="row2" id="2-0"></div> 
<div class="row3" id="3-0"></div> 

 

along with the CSS for those divs

.row1, .row2, .row3 {
position:absolute;
z-index:1;
height:29%;
width:2.5%;
top:7%;
background-color:blue;   <-----------------
opacity:0.0;		<----------------	
filter: alpha(opacity=0);  <---------------
}

 

My question is about the lines with the giant arrows

Originally I did not have them, and the site worked perfectly in firefox.  I could click on the area I mapped and it would load my jQuery.  When I tried it in IE however, nothing happened at all.  I could not even get an alert to popup when clicking on the area, the most basic of javascript tests. Out of pure happenstance I tried adding a background color just to see if the divs were being recognized in Internet Explorer.  It turns out they were, and to my surprise once I added the background color I was able to click on the divs and run my jQuery.  I then added the opacity so that the background color was hidden.

 

Why in the world would I have to add background color for IE to be able to find the Div?  if anyone could explain this to me I would be grateful because I have no idea why this solved my problem.  I think I included everything here in the description, but if you need more details let me know.