IE7 z-index nested div issues


We have an interesting z-index problem in IE7.

Have a look at the page here in IE7:

As you can see, div.tec-tooltip with z-index: 1001 is not displaying properly.

I’ve included the basic structure below:

<div class="daynum tec-event">Calendar day</div>
<div class="sp_events">
    <a href="#">Link to event</a>
    <div class="tec-tooltip">Tooltip content here</div>
</div><!-- / .sp_events -->

It should be noted that we have tried the following with no success, in light of IE7’s known z-index issues:

*+html .tec-calendar div.sp_events {z-index:1000;}
.tec-calendar div.sp_events .tec-tooltip {z-index:100;}
*+html .tec-calendar div.daynum {z-index:1 !important;}

We are looking for a pure CSS solution to this issue.

Any help at all is greatly appreciated. Thanks in advance!


This is an extremely awkward situation. Is EVERY LINK in that entire table going to have a hover box? If so, then this should suffice, although it’s not a pretty solution.

Basically, as you realize, IE 7 and down sets the value for z-index to 0. Overlap is to be expected. You have to manually set the z-index’s as such

.tec-calendar tbody{position:relative;}
.tec-calendar tbody td div+div{z-index:1;}
.tec-calendar tbody td div+div+hr+div{z-index:2}
.tec-calendar tbody td div+div+hr+div+hr+div{z-index:3;}
.tec-calendar tbody td div+div+hr+div+hr+div+hr+div{z-index:4;}

This won’t work in IE6 (if you want it to work, manually add a class to each div (that has a z-index “test” in it) and set the z-index manually there, and then my code I just posted, won’t be needed).

It’d be a lot better if I knew the scope of your page though. Is that page basically the final product (minus content)? Or were you having so many columns/rows of the hover, merely to demonstrate the problem?

Technically, since you have different rows of stuff, z-index’s can overlap others in the table…again, would be better to know the scope of your project, but this should account for everything…

.tec-calendar tbody{position:relative;}
.tec-calendar tbody tr td div+div{z-index:1;}
.tec-calendar tbody tr td div+div+hr+div{z-index:2}
.tec-calendar tbody tr td div+div+hr+div+hr+div{z-index:3;}
.tec-calendar tbody tr td div+div+hr+div+hr+div+hr+div{z-index:4;}

.tec-calendar tbody tr+tr td div+div{z-index:5;}
.tec-calendar tbody tr+tr td div+div+hr+div{z-index:6}
.tec-calendar tbody tr+tr td div+div+hr+div+hr+div{z-index:7;}
.tec-calendar tbody tr+tr td div+div+hr+div+hr+div+hr+div{z-index:8;}

That covers two rows. You’d need to copy the last segment of that code again, and make it tr+tr+tr (3 instead of 2).

Complicated :(. But it’s CSS only.

A JS solution would work more efficiently, although probably not the best for this considering JS can be turned off…

Clarification, when I say you’d need to copy the last segment of code again, I mean if you have 3 rows, you need tr+tr+tr. If your example code has seven trs, it needs tr+tr+tr+tr+tr+tr+tr…etc.

Thanks for the reply.

Yes, every link will have a tooltip hover box. In terms of IE, we are only developing for IE7+.

In terms of scope, we do not know how many events will be on one particular day. This component is being deployed across 26 different websites for 26 different schools, so flexibility is key (one of the reasons why we were hoping for a CSS based solution).

We are open to a javascript/jquery solution if CSS-only is not viable.

We’ve tried the following code snippet, but not exhaustively, with no success.

$(function() {
       var zIndexNumber = 1000;
       // Put your target element(s) in the selector below!
       $("div").each(function() {
               $(this).css('zIndex', zIndexNumber);
               zIndexNumber -= 10;

Again, any help is appreciated!


Well I basically gave hte CSS approach. The non …ugly (if you couldeven call it that) solution would just be to add a class to each cell and give the z-index accordingly.

That being said, if you don’t want to use a CSS approach (given the options) you can press the little red flag button, at the bottom left of each post, and in the comments, ask for a move to the Javascript forum :).