How can I make these CSS absolute positions work in IE? - css

Question

Please look at the code below. If you look at the diagram of the body, each colour represents different content on the right. However, these links won't work in IE, I assume due to the CSS I have written.
Can anyone shed some light on how I can replicate this in IE?
HTML:
<div id="male">
<img src="male1.png" alt="male1 Compensation Calculator" title="male" width="130" height="300" class="alignleft size-full wp-image-117" /></p>
<div class="head"><span class="whole fakelink"></span></div>
<div class="neck"><span class="whole fakelink"></span></div>
<div class="arm1"><span class="whole fakelink"></span></div>
<div class="arm2"><span class="whole fakelink"></span></div>
<div class="torso"><span class="whole fakelink"></span></div>
<div class="legs"><span class="whole fakelink"></span></div>
</div>
CSS:
div.head {
position: absolute;
width: 70px;
margin-left: 31px;
height: 70px;
}
div.neck {
position: absolute;
height: 6px;
width: 18px;
margin: 70px 0px 0px 56px;
}
div.arm1 {
position: absolute;
height: 105px;
width: 30px;
margin: 77px 0px 0px 100px;
}
div.arm2 {
position: absolute;
height: 105px;
width: 30px;
margin: 77px 0px 0px 0px;
}
div.torso {
position: absolute;
height: 118px;
width: 70px;
margin: 77px 0px 0px 31px;
}
div.legs {
position: absolute;
height: 105px;
width: 69px;
margin: 195px 0px 0px 31px;
}
.whole {
width:100%;
height:100%;
display:block;
}
.fakelink {
color:white;
font-weight:bold;
}
.fakelink:hover {
cursor: pointer;
text-decoration:none;
}

Answer 1

I know of only two solutions to fix this issue, though they both ultimately come down to needing a background:
Option 1
Set a background-color on .fakelink that is not transparent. Whilst clearly in your case this wouldn't be very helpful it will illustrate the need for a background.
If you were only needing to support IE9, I would suggest using rgba with a low alpha opacity:
.fakelink{ background-colour: rgba(255,255,255,0.01) }
Option 2
Use a small transparent .png or .gif and tile it as the background-image for .fakelink