Question

I have a calendar/table that when you hover over each day we have a small popup that is absolutely position below each cell.

To make this work I have added a <div style="relative" /> inside each cell. Works fine in FF although when you hover over it in IE the z-index is being ignored.

I have tried all of the hacks I can think of to get it to work in IE 7 + 8.

Answer 1

No need for all the individual z-indexes on the .wrapper div’s inside the td elements (they can all be set to 1 I believe), and set these properties:

/* add these two to your selector */
#calendar tbody td {
  position: relative;
  z-index: 1;
}

/* create this new selector */
#calendar tbody td:hover {
  z-index: 2;
}

Using firebug and IE’s developer tools, it appeared to me that it was working in Firefox and IE7 and 8.