IE Bug: Text ignores z-index of higher elements

sample-buttonOh Internet Explorer, how do I hate thee, let me count the ways.

Actually, I’ve already wasted enough of my life hunting down bugs caused by your horrendous rendering engine that counting out my hate for you will only waste more.

My latest run in involves some “buttons” that actually contain a large amount of styled text.

<div class="button">
	<h2>I am a heading</h2>
	<p>This is some subtext to the heading and is in a paragraph element</p>
	<div class="grid-link">
		<a href="#">Here's some link text that is hidden with CSS</a>
	</div>
</div>

Now that may look a little overly complicated for what I’m trying to do but it is semantically correct. Many is the time I have seen people just do something like the following.

<a href="#">
	<h2>Blah</h2>
	<p>Blah blah</p>
</a>

The problem here is that the heading and paragraph elements are block level elements but an anchor is an inline element. A block level element can contain other block level elements and inline elements, but an inline element cannot contain a block element.

Anyway, my solution allows me to keep heading and paragraph elements in this clickable button. I used CSS to absolutely position the anchor element above the rest of the button text with z-index, fixed width and height, and a display setting of block.

Here’s some sample CSS.

.button {
	position: relative;
	width: 200px;
	height: 100px;
	background: #ddd;
}

.button:hover {
	background: #ccc;
}

.grid-link a {
	text-indent: -9999px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
}

Internet Explorer problem

No, this wasn’t just some lowly IE6 or crazy IE7 issue, this issue appears to affect IE right up to IE10. Microsoft obviously don’t consider this an issue.

So, Internet Explorer ignores the fact that I have declared my .grid-link anchor as a block positioned over the entire button text. As a result my anchor only works when there is no text displayed underneath.

If you don’t follow me, try this live example: http://jsfiddle.net/gzGWv/

See how in every normal sane browser you can hover over the block and your cursor remains a ‘pointer’ type indicating it’s clickable, but in any version of Internet Explorer it returns to being a text cursor when you hover over the text and you cannot click the link.

Internet Explorer Fix

After much hair-tearing and wading through dozens of similar issues I found the fix was relatively simple.

Internet Explorer doesn’t like these sort of ‘empty’ elements (even though the element is actually not empty) and requires a transparent background image to give it some substance. I just needed to add the following to my anchor element.

background: transparent url('http://alex.leonard.ie/misc-images/transparent.png') repeat 0 0;

You can see how it now works in all versions of IE: http://jsfiddle.net/5GVMr/1/

I write this in the hope that it helps someone else who encounters the same problem.

Comments

  • http://www.facebook.com/bobyerkes Robert Yerkes

    background-color:#fff;
    opacity:0;

    Appears to work for me and doesn’t require a transparent image.

    http://jsfiddle.net/5GVMr/3/

  • Cliff Pfeifer

    Thank you so much for this fix, I’ve been pulling my hair out all weekend trying to figure out what the heck is going on. Saved the day for me, thanks.

  • Dave

    Thank you so much, i had this problem with a drop down menu. And as Robert already pointed out, you just need to set any background to the element which is positioned absolute, in my case it was a element.

    • http://alex.leonard.ie/ Alex Leonard

      Glad I was able to point you in the right direction and thanks again to Robert for the extra information!

  • Matt Crawford

    Awesome awesome. Thanks. Robert’s solution also works for me.

    • http://alex.leonard.ie/ Alex Leonard

      Brilliant, glad I put this up here :)

  • Martin

    Thank you thank you thank you!

    • http://alex.leonard.ie/ Alex Leonard

      You are most welcome!

  • StevenLockey

    If you are doing it with an outside wrapper and two internal elements over the top of each other aka

    Then you need to make sure both the wrapper and the on-click link are position:relative or the text will still appear in front of them regardless of z-index or background.

  • Светлана Волкова

    Thanks you so much, this bug was freaking me out!

    • http://alex.leonard.ie/ Alex Leonard

      Brilliant – very happy to have been able to help sort it out.

  • fabs

    Thanks for this post, the bug has been driving me crazy for ages!

    • http://alex.leonard.ie/ Alex Leonard

      Brilliant, glad it helped!

  • Glen

    Dude! Much thanks! This was killing me! Just when you think you’ve seen every problem IE can throw at you a new one raises its ugly head. Much appreciated!

    • http://alex.leonard.ie/ Alex Leonard

      Heh, yeah I know – sometimes those IE issues really surprise me – of course I should know to have zero expectations!

  • Daz

    Hi,

    thanks for this great tip – it works also with applying background-color: rgba(0,0,0,0.7);

  • Daz

    Type, ment: background-color: rgba(0,0,0,0);

  • thedude

    This solved my issue which was exactly the same problem: empty anchor absolutely positioned over an img element wasn’t clickable/honoring hover state in IE8/9/10. THANK YOU.

  • jkuss

    I had a wicked bug I couldn’t chase down. This was the clue to fix it. I just had to give my absolute element a background: style.

    • http://alex.leonard.ie/ Alex Leonard

      Delighted to have provided a clue :)

  • YM

    Oh My God! Dude…. I wasted a whole day trying to figure this out =))))) THANKS!!!!!

    • http://alex.leonard.ie/ Alex Leonard

      Woot! Very happy to have been of use :)

      Saving anyone from Gloomy Recurring Internet Explorer Fever (GRIEF for short) helps to make my day.

  • mc18

    Thank you! I have literally just spent 4-hours trying all of these different solutions failing to figure out this problem. Can’t believe I wasted so much time on something so simple. Thanks for the post!

    • http://alex.leonard.ie/ Alex Leonard

      Great, delighted this was useful to you. Definitely worth writing up these frustrating bug issues :)

      Thanks for dropping a comment!

  • nazzanuk

    Thanks so much, I literally had the exact same problem, the same html, same useless behaviour on IE10. Lifesaver.