Link over whole div is not working when cursor is over contained text in IE

Question

I have this code for demonstration. It makes my link spread over whole div, which works great in Firefox, but in IE when I move cursor over text it changes to text cursor and link doesnt work there... I tried fiddling with z-index but no results... any suggestions?

I need to fill my div with other divs with their own content, so

a style="display: block"

is not an option, an i also want to avoid Javascript like

onclick="location.href=

Same Question is answered here: http://stackoverflow.com/questions/6438048/css-problem-link-positionabsolute-above-a-box-not-work-in-ie-opera/6438212#6438212 — Ahsan Rathod, Jul 13 '11 at 15:23
sory, i forgot some informations, now(after edit) its clear that solution you suggested will not work for me... — Gatekeeper, Jul 13 '11 at 15:35

score 6 · Accepted Answer · answered Jul 13 '11 at 16:00

I have a solution for you. In HTML5 it would be valid to use <div>'s inside of an <a> tag. But since you cannot change your language and HTML4.01 does not allow block elements inside of an <a> I would suggest faking it. By that I mean use <span>'s inside of the <a> tag instead and style them to act as a <div>. Here is a working example: http://jsfiddle.net/DzpjT/11/

HTML:

<body>
    <a href="http://www.google.com">
        <span class="fakediv">Annoying text la lallalalalalalalalal</span>
        <span class="fakediv">Annoying text la lallalalalalalalalal</span>
    </a>
</body>

CSS:

a{
    display: block;
    width:700px;
    height:500px;
    margin: 10px;
    background-color: lightblue;
    color: black;
    text-decoration: none;
}
span.fakediv{
    float:left;
    clear: both;
    display: block;
    margin: 10px 20px;
    cursor: pointer;
}

this is interesting idea, i will try it tomorrow and let you know, looks like you will get some points from me :-) thanks — Gatekeeper, Jul 13 '11 at 16:29

score 1 · Answer 2 · answered Jul 13 '11 at 15:19

1

Change your code to this:

<a href="http://www.google.com/" style="display:block;position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 10;"></a>

Should work fine now. I added display block to the anchor tag which will cause it to behave like a div.

answered Jul 13 '11 at 15:19

brenjt

15,997
13
77
118

Sorry, i forgot to tell that i need to have several other divs with some content in my div, so tag styled as block wouldnt be an option... – Gatekeeper Jul 13 '11 at 15:26

score 1 · Answer 3 · answered Jul 13 '11 at 15:21

1

Like brenjt said, I think you simply need to add a height attribute to your css. He threw some other stuff in there too which is all good, but in my experience it's not having height set explicitly in your CSS that often causes this.

answered Jul 13 '11 at 15:21

mountaingirl

248
2
10

to which element? div has height of 500px and span has 100% of that divs height – Gatekeeper Jul 13 '11 at 15:30
Sorry I wasn't specific enough. Try changing the span height to pixels instead of a percentage. – mountaingirl Jul 13 '11 at 16:28
just tried it, but this is not the case where this would help... thanks for trying though – Gatekeeper Jul 13 '11 at 16:34

score 0 · Answer 4 · answered Mar 17 '13 at 23:53

I had this same problem but since the content I was attempting to cover had heading and paragraph tags, I was hesitant to start mocking css classes up to mimick paragraphs and headings unnecessarily.

While I was debugging the issue, I added a background colour to my a tag. This clearly demonstrated that the tag was completely covering the content from just above it in the DOM, as it was supposed to. The entire area was clickable. As soon as I removed the background colour, hovering over the text converted the cursor to the insert icon and didn't register a click.

So, seeing as I was already employing a 1px transparent png on the page anyway (for fixing custom fonts in IE), I just set that as the background image on the a tag.

It works.

Link over whole div is not working when cursor is over contained text in IE

4 Answers4