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>

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="#">
	<p>Blah blah</p>

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:

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('') repeat 0 0;

You can see how it now works in all versions of IE:

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


  • background-color:#fff;

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

    • ~kqr

      Thank you, Robert and Alex! Saved me a bunch of pain there.

  • 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.

    • 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.

  • Martin

    Thank you thank you thank you!

  • 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!

    • 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!

  • 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!

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

  • Daz


    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.

  • YM

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

    • 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!

    • 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.

  • saq

    Thanks, saved my life

    • Brilliant! Glad to have been able to help out!

  • David

    This was exactly my problem, I’m glad I found your post and your solution worked perfectly 🙂 Thank you so much!

  • Ben Fallaize

    Nice fix! Been pulling my hair out for ages on that one!

  • Thomas

    IE is so crazy, this hack works also with:
    background-image: url(‘ ‘);

    IE does not need a valid Image. So an empty URL is aceptable too. By the way you save a request or a 404.

    I tested this on IE10, IE9 and it fixes the bug. But I prefere the background:#fff; opacity: 0; solution for a valid CSS.

    In IE8 you get for the empty URL a background:none. Because of this the hack does not work. In IE8 you have something to write in the URL even though there is no image in this path.

    In IE8 the background:#fff; opacity: 0; solution does not work because IE8 does not Support the opacity-attribute.
    By the way IE11 and modern Browsers are not affected because of this hacks.