CSS Problem - Link (position:absolute) above a Box not work in IE + Opera

Question

I have a link in the bottom of a div-box, which have position:absolute and should overlay the whole div-box.

like that: http://jsfiddle.net/UpwvT/4/

In FF and Webkit it works fine, but in IE + Opera the "some text" is still not a link and not clickable.

Anybody an idea? :) thanx

Answer 1

It looks like bug in Opera and IE.

There is my hack for Opera and IE9. Add this for .link
background-color: rgba(204,204,204,0.01);

It is very transparent background.

http://jsfiddle.net/UpwvT/19/

It doesn't work in IE8.

Answer 2

Problem is solved - just add transparent background of link in css - for me work fine with transparent gif file.

.link_css{
background: url(path_to_your_file/trans.gif);
}

Answer 3

I used the same solution proposed by Pavlin, but using a 1x1px transparent GIF data-url-encoded, this way:

.link_css{
  background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}

So you avoid an extra http request to the server with very few bytes of increase in the CSS stylesheet. Data-url is supported in IE8+.
http://caniuse.com/datauri

Answer 4

Still don't get where this error comes from... Personnally I just put some fully transparent bg there

background: rgba(0,0,0,0);

Answer 5

how about placing the link tag(a) around the div like so:

<a class="link" href="http://google.com">
    <div class="box">
        some text
        <div class="linkbox">
            &nbsp;
        </div>

    </div>
</a>

EDIT

The folowing should be possible too:

<div class="box">
    <a class="link" href="http://google.com">
        some text
        <div class="linkbox">
            &nbsp;
        </div>
    </a>
</div>

I beleve that should fix it.

Answer 6

Don't need to add linkbox inside box like this:

<div class="box" onclick="location.href='http://google.com'">
    some text
</div>

And define styles like this:

<style>
    .box {
        width:200px;
        height:200px;
        background:#ccc;
        position:relative;
        text-align:center;
        z-index:1;
        cursor: pointer;
        cursor: hand;
    }
</style>

Working Demo: http://jsfiddle.net/rathoreahsan/cLmqe