Clickable link on bg-image - html

Question

This problem bothering me very long, and I try to figure the solution, but I just can get it.
I have background image on div tag, and on that image I have part with text, which I want to select to be a link.
So I try it this way #signUp is a a element which is positioned in div #main_text:
#signUp {
display:block;
width:137px;
height:100px;
position:absolute;
left:31px;
top:289px;
}
#main_text {
width: 840px;
height: 335px;
background-color: white;
margin: auto;
position: relative;
}
The problem is that this code works fine in all browsers excepting the IE, on IE signUP is not clickable, any solutions, thanks.
This is html part :
<div id="main_text">
<?php if (function_exists("easing_slider")){ easing_slider(); }; ?>
</div>

Answer 1

see the mentioned below code its working on IE also IE8+
HTML
<div id="main_text">
Sign Up
</div>
CSS
#signUp {
display:inline-block;
width:137px;
height:100px;
position:absolute;
left:31px;
top:289px;
background:red;
color:black;
text-align:center;
}
#main_text {
width: 840px;
height: 335px;
background-color: green;
margin: auto;
position: relative;
}
DEMO

Answer 2

This should work in IE6, IE7 and newer. http://jsfiddle.net/uPeWh/
I think the problem was the z-index of the containers.
#signUp {
z-index: 20;
display: block;
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 50px;
background-color: red;
font: 1em Arial;
color: white;
}
#main_text {
z-index: 10;
width: 300px;
height: 200px;
margin: 0;
padding: 0;
position: relative;
background-color: grey;
} ​
<div id="main_text">
Click me
</div>​