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…