0

I've looked everywhere, found plenty of articles, explaining work a rounds for IE 7,8 and 9 z-index problems, but none of these cases fixed my problem.

The problem is that I have content in the middle of a page that the user can interact with, but I don't want the user to be able to interact until 2 seconds after page load (don't need help with this). So I am using a blocker as a solution, a div that sits above the content being animated in the HTML, with position absolute, and covers the user interaction so you cannot mouseover animate.

This is working in Chrome and Firefox, but all IE's are having z-index problems.

I made sure every parent element has a position of either relative or absolute, and even tried making the parent containers a higher index and vice-versa. Has anyone ran into a problem like this?

I cannot show code for private matter, but I've explained it thoroughly enough I hope.

Any questions, let me know.

Ben Sewards
  • 2,571
  • 2
  • 25
  • 43
  • 1
    I've used such techniques in IE and they work fine, so without seeing exactly what you're doing it'll be hard to help. Perhaps you could set up an example with jsfiddle.net. – Pointy Mar 20 '12 at 16:07
  • 1
    As Pointy had mentioned, please provide an example. Yes IE 7 Z-index issue is normal because they IE interprets z-index is based not only on the z-index assigned to the actual elements but it checks it from the parent downwards. If parent1 of element1 has a greater z-index than parent2 of element2 , then element1 will be displayed on top of element2 eventhough element1 might have a lesser z-index than element2. I hope this helps – Raghav Mar 20 '12 at 16:11
  • http://stackoverflow.com/questions/6229184/ie7-z-index-issue-context-menu/6229309#6229309 – thirtydot Mar 20 '12 at 16:20
  • let me see if i can render something in js guys – Ben Sewards Mar 20 '12 at 16:24
  • http://jsfiddle.net/mmWNT/5/ - it's working in js fiddle with the #blocker CSS defined, but it needs to be tested in IE7-9, which hasn't worked. Any ideas? (you can remove the blocker css id to see there can be user interaction) – Ben Sewards Mar 20 '12 at 17:02
  • can someone checkout the above jsfiddle via IE? Thanks! – Ben Sewards Mar 20 '12 at 23:07
  • thirtydot links to a similar problem where the (correct) answer mentions the source order. Is the blocker placed after the content you wish to cover? – madr Mar 21 '12 at 06:45
  • @madr see below for my own fix – Ben Sewards Mar 21 '12 at 13:42
  • why would someone down vote my question...? I would really like an explanation on that. – Ben Sewards Mar 21 '12 at 15:36

1 Answers1

2

In IE, I noticed that even when setting parent elements to position relative and/or absolute and having their z-index's lower than the blocker div (which is a normal fix), the blocker div was still being stacked as an individual index, therefore not stacking over the other elements above. Another problem I noticed is that when you set the blocker background-color to a color, z-index stack works, and you cannot interact with the lower z-index elements. BUT when you set the empty blocker to transparent, z-index will not stack with the other elements (bug).

Here is a Work around for all IE Browsers *if you are trying to use an empty div to block user interaction (otherwise, the above should work):

CSS

#blocker {
    position:absolute;
    width: 100%;
    height: 200%;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    z-index:9999;
    background-image: url('/cont-img/Transparent.gif');
    background-repeat:repeat;
}
  1. Download the transparent gif that works like opacity 0, but for all IE Browser's: transparent.gif
  2. Repeat gif background so that it repeats x&y over the above elements

HTML

    <!-- place empty blocker div BELOW content trying to block -->
    <div id="blocker"></div>
Ben Sewards
  • 2,571
  • 2
  • 25
  • 43
  • Another workaround that came around recently for IE8 was to use an -ms- linear-gradient as the background attribute of the overlay, as this background does not effect the inner text. I can post that update soon. – Ben Sewards Feb 24 '15 at 14:41
  • hm, interesting. I could understand if it was an issue of, say, the div not having width or height because it was empty or something, but the fact that it is the right size and just the z-index fails is... crazed. Thanks for the help though, worked great. – dmgig Feb 24 '15 at 15:50