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

Regardant

It looks it is fixed in Opera now. – Ikeikebana

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.

Ikeikebana

oh yeah, in opera it works. thanx! seems to be something like a background-bug... but IE still sucks – Permanganate

@co-KANH is right: the answer is a gif 1px x 1px transparent. That makes it work everywhere. – Mientao

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);
}

Kop

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

Dishcloth

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);

Duffy

I tested multiple options and found this to be the best solution, personally :) I found the bug by doing: position: absolute; top: 0; left: 0; right: 0; bottom: 0; -- warning: sass will convert rgba(0,0,0,0); to transparent which won't work. So try: rgba(0,0,0,0.01); in sass. – Bohemia

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.

Nonu

hm, sorry, but this is not valid: validator.w3.org/#validate_by_input+with_options – Permanganate

Well it does work, and in my opinion that is more important than being valid. You could use this option if nothing else works. – Nonu

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

Ence

And if you don't want to use javascript then take a look on this fiddle: jsfiddle.net/rathoreahsan/cLmqe ---- Pure CSS & xhtml as you was trying to do. Other fiddles by other users are not acceptable by w3c. According to w3c rules you cannot define a <div> tag inside an <a> tag. – Ence

thanx, yes, it wortks fine :). but actually I wanna try to solve this problem without javascript.... hmm – Permanganate

take a look on this fiddle: jsfiddle.net/rathoreahsan/cLmqe --- It works fine without javascript – Ence