9

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

Jörg Steinhauer
  • 137
  • 2
  • 10

6 Answers6

7

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.

Michas
  • 8,534
  • 6
  • 38
  • 62
4

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);
}
Pavlin Georgiev
  • 41
  • 1
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

Carlos Cabo
  • 741
  • 1
  • 7
  • 14
1

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

background: rgba(0,0,0,0);
Taryn
  • 242,637
  • 56
  • 362
  • 405
Olivier
  • 19
  • 1
  • 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. – simey.me Apr 11 '17 at 09:52
-1

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.

Manuel
  • 10,153
  • 5
  • 41
  • 60
-1

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

Ahsan Rathod
  • 5,465
  • 2
  • 21
  • 25
  • And if you don't want to use javascript then take a look on this fiddle: http://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
    tag inside an tag.
     – Ahsan Rathod Jun 22 '11 at 10:45
  • thanx, yes, it wortks fine :). but actually I wanna try to solve this problem without javascript.... hmm – Jörg Steinhauer Jun 22 '11 at 10:48
  • take a look on this fiddle: jsfiddle.net/rathoreahsan/cLmqe --- It works fine without javascript – Ahsan Rathod Jun 22 '11 at 12:02