zIndex issue in Internet Explorer 9 & 10

Question

Reading this question you're probably thinking 'not again' and want to mark it as duplicate. But after I've tried about every fix I could find up here and in other parts of the internet I couldn't think of another way to get a solution than asking here.

The problem is: I have a container, which should be completely clickable. The problem in this particular website is, that we can not control what elements will be inside of the container. Since there could be block-elements inside, we can't use an <a> tag instead of <div> as the container. We also want to the site to work in a no-js environment, so an onclick on the container is a no-go unfortunately.

That's why we choose an absolutely positioned <a> which will be an overlay for the entire container. This works well in every browser, except for IE.

In IE all content of the container is painted above the <a>, thus making it a non-clickable area. This isn't really much of a problem with the example here: just a small piece of text. But in other container we have images, tables etc. which completely fill the size of the container.

Even if I'd change the z-index of the <p> to 0 and the z-index of the <a> to 1, the paragraph is still on top of the link. How is this possible? I've read all about stacking contexts and levels, and I still can't find a single thing wrong in my code.

Note: there's a display: hidden; <span> in the <a>, but that's for internal use and I don't think it will affect this issue.

Note: the div.content__container has a parent from which it can get the 100% dimensions.

HTML:

<div class="content__container">
    <p class="__align-to-bottom __right" >text <span class="__icon">f</span></p>
    <a href="#" class="__link"><span>text</span></a>
</div>

CSS:

.content__container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.content__container > *{
    position: relative;
}

.__align-to-bottom {
    position: absolute !important;
    bottom: 0;
    left: 0;
}

.__align-to-bottom.__right {
    left: auto;
    right: 0;
}

a.__link {
    position: absolute !important;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

a.__link span{
    display: none;
}

As said this works fine in every browser out there except for IE. I'm currently testing in 9 & 10 and I'm guessing IE<9 isn't going to be a walk in park either.

EDIT

As suggested I've created a fiddle. In this fiddle I've already implemented some remarks. Such as the display: block; line for a.__link and removing the content__container > *{} from my css. I've added some JS to clarify which element is being clicked on. In IE it's still not working: the onclick event from the paragraph is being triggered.

If JS isn't an option, how would you implement a `click`? I'm confused. — Paulie_D, Feb 11 '14 at 15:54
I'm sorry @Paulie_D, I don't understand your question. What `click` are you referring to? I'm using a `` so the user can navigate to another page. — Luuuud, Feb 11 '14 at 15:57
Ok...I understand, I was misled (perhaps in my own mind) by your reference to `onclick`. — Paulie_D, Feb 11 '14 at 16:12
Try setting `a.__link` to `display: block` or `inline-block`. Also it would really help if you could replicate this problem in a JSFiddle. — Ennui, Feb 11 '14 at 16:14
@Ennui. I forgot to add that line to the code. It's already displayed as block element. I've added it now. I'm going to create a filddle of it now. — Luuuud, Feb 11 '14 at 16:28

score 1 · Accepted Answer · answered Feb 11 '14 at 16:12

1

I came across an issue like this once where I had a blank link positioned absolutely over the top of some content I wanted to be clickable - I tried everything to get it to work and finally found a really dirty hack:

Make a transparent gif or png (has to be at least 50x50) and then use it as the background of the anchor. It should then be clickable, if it is the highest z-index

I take it your link is a block element and actually covers the 100% height and width too

answered Feb 11 '14 at 16:12

Pete

57,112
28
117
166

Yeah, it is. I forgot to add the `display: block;` line. Editing my question now. – Luuuud Feb 11 '14 at 16:26
1

The hacky way of adding a background image worked :| Thanks, Pete. Without your help I'd never have figured it out! – Luuuud Feb 11 '14 at 17:03

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

Since there could be block-elements inside, we can't use an <a> tag instead of <div> as the container.

Why not? Are block-level elements allowed inside inline-level elements in HTML5?

ps. Your fiddle code works in IE8.

edited May 23 '17 at 12:20

Community

1
1

answered Feb 11 '14 at 17:07

anddoutoi

9,973
4
29
28

Thanks for checking in IE8, anddoutoi. I wasn't aware of HTML5 allowing block elements inside of inline elements, thanks for that knowledge as well. Unfortunately we're creating a government website, which must be every-device-capable. So even calculators and tamagotchis running IE2 must be able to handle this website perfectly. In order to pass the tests our site has to go through, we have to use very, very strict standards. Having a block inside of an inline-element is a big no-no for us. :( – Luuuud Feb 11 '14 at 17:23
1

No worries. My thoughts go out to you and your team. Good luck ^^ – anddoutoi Feb 12 '14 at 07:51

zIndex issue in Internet Explorer 9 & 10

2 Answers2