CSS: Hyperlink box not clickable unless I specify a background-color in IE8

Question

I'm trying to make a 256x256px transparent clickable box thats on top of 3 layers which toggle on/off (just a status display). I gave the 3 layers a z-index of -1 and the hyperlink box a z-index of 5, so it should be on top. This code works fine in chrome and firefox. The strange thing is if I set a background-color for statuslink it displays and is clickable. This is my CSS file:

.layer{position: absolute;left: 0px;top: 0px;z-index: -0;}
.map{position: absolute;left: 0px;top: 0px;z-index: 1;}
.headerarea{height: 200px; width: 100%; }
.header{ position: relative; text-align: center; width: 100%; }
.bodyarea{position: relative; width: 100%; height: 1000px;}
#logo1{float: left;border: 1px solid #dcdce9;}
#logo2{float: right;border: 1px solid #dcdce9;}
.roomlist ul{list-style: none; padding: 0;margin: 0; position: relative; }
.roomlist li{margin: 0 0.15em; float: left; position: absolute;}
#floor1{left: 0px;top: 0px;}
#floor2{left: 300px;top: 0px;}
.statuslink{ position: absolute; top: 30px; height: 256px; width: 256px; z-index: 5;}
.statusimg{position: absolute;left: 0px;top: 30px;z-index: -0; }
.menu{width:30em;position: absolute;left: 860px;top: 20px;}
.menu ul{list-style: none;padding: 0;margin: 0;}
.menu li{margin: 0 0.15em;}
.menu li a{background-color: white;height: 5em;line-height: 5em;width: 15em;display: block;border: 1px solid #dcdce9;color: #0d2474;text-decoration: none;text-align: center;}
.menu li a:hover{background-color: #dcdce9;height: 5em;line-height: 5em;width: 15em;display: block;border: 1px solid black;color: #0d2474;text-decoration: none;text-align: center;}
#loading {width: 300px;height: 100px;background-color: white;position: absolute;left: 20%;top: 40%;text-align: center;border: 4px solid #999999;z-index: 10;}
img{  border-style: none;}
body { font-family: Verdana; }
.led{position: absolute;}

And this is my HTML:

9.<div class="bodyarea">
10.        <div class="roomlist">
11.                <ul>
12.                        <li id="floor1"><b>Floor 1</b><br />
13.                        <a class="statuslink" href="C51a-bld.htm"></a>
14.                        <div class="statusimg" id="f1okon">
15.                                <img src="ok_on.gif" /></a>
16.                        </div>
17.                        <div class="statusimg" id="f1okoff">
18.                                <img src="ok_off.gif" /></a>
19.                        </div>
20.                        <div class="statusimg" id="f1fail">
21.                                <img src="fail.gif" /></a>
22.                        </div>
23.                        </li>
24.                        <li id="floor2"><b>Floor 2</b><br />
25.                        <a class="statuslink" href="C52a-bld.htm"></a>
26.                        <div class="statusimg" id="f2okon">
27.                                <img src="ok_on.gif" /></a>
28.                        </div>
29.                        <div class="statusimg" id="f2okoff">
30.                                <img src="ok_off.gif" /></a>
31.                        </div>
32.                        <div class="statusimg" id="f2fail">
33.                                <img src="fail.gif" /></a>
34.                        </div>
35.                        </li>
36.                </ul>
37.        </div>
38.</div>

Can someone guide me in the right direction please. My css knowledge is very weak.

Answer 1

It looks like you have your <a> links outside of your absolutely positioned div. When the Div reposition them self the links don't know where to go.

Also it looks like you have some extra </a> tags. Compare source below to see changes.

<div class="bodyarea">
        <div class="roomlist">
                <ul>
                        <li id="floor1"><b>Floor 1</b><br />                        
                            <div class="statusimg" id="f1okon"><a class="statuslink" href="C51a-bld.htm"><img src="ok_on.gif" /></a></div>
                            <div class="statusimg" id="f1okoff"><a class="statuslink" href="C51a-bld.htm"><img src="ok_off.gif" /></a></div>
                            <div class="statusimg" id="f1fail"><a class="statuslink" href="C51a-bld.htm"><img src="fail.gif" /></a></div>
                        </a>
                        </li>
                        <li id="floor2"><b>Floor 2</b><br />
                        <a class="statuslink" href="C52a-bld.htm">
                            <div class="statusimg" id="f2okon"><img src="ok_on.gif" /></div>
                            <div class="statusimg" id="f2okoff"><img src="ok_off.gif" /></div>
                            <div class="statusimg" id="f2fail"><img src="fail.gif" /></div>
                        </a>
                        </li>
                </ul>
        </div>
</div>