IE display issue: z-index/position

detail boxes appear on hover and are behind other elements

[evilracecarlive]

I am a new poster here. Hopefully I have followed posting rules appropriately! So here goes...

I have created a section on a site that the user will hover over a title and a box with more info will appear. It displays perfect in FF, but in IE7 the detail boxes that appear are behind the other elements on the page.

This is all done with CSS and HTML (no javascript).
Doctype is transitional, but i have the same issue in loose.

Here is the CSS. I left in the colors and borders... even though they aren't necessary it helps to identify the different elements when rendered in a browser.

.hbsection{
margin-bottom:30px;
width:580px;
}
.hbsection .hbcontent{
width: 580px;
}
.hbsection .hoverbox h3{
padding:0;
margin:0;
color:#FFF;
}
.hbsection .hoverbox a{
color: #fff;
text-decoration:none;
display:block;
text-align:center;
cursor: pointer;
width: 277px;
}
.hbsection .hoverbox .details{
position: absolute;
top:35px;
left:9px;
z-index:105;
padding:5px;
border: 1px solid #333;
display:none;
}
.hbsection .hoverbox:hover .details{
display: block;
}
.hbsection .hoverbox .details p{
position:relative;
z-index:100;
width:250px;
}
.hbsection .hoverbox{
position: relative;
padding: 5px 0;
margin: 5px;
float:left;
border:solid 1px #333;
display: inline;
width: 277px;
}
#supp .hoverbox{
background-color: #003466;
}
#supp div.hbheading, #acadsupp .hoverbox:hover{
background-color: #9aaec2;
color: #000;
}
#supp .hoverbox{
background-color: #003466;
}
#supp div.hbheading, #acadsupp .hoverbox .details, #supp .hoverbox:hover{
background-color: #9aaec2;
color: #000;
}

And here is the HTML. The repetition of the "hoverbox" div and the "lorem ipsum" are to show how the "details" area appears behind other elements.

<div id="supp" class="hbsection">
 <div class="hbcontent">
 <div class="hoverbox">
 <h3><a>Title</a></h3>
 <div class="details">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales. Donec scelerisque, tellus sed commodo accumsan, augue quam sollicitudin sem, in dapibus velit orci quis massa. Curabitur aliquam, neque placerat condimentum vulputate, quam neque imperdiet augue, eu consequat mi lacus vel justo. </p>
 </div>
 </div>
 <div class="hoverbox">
 <h3><a>Title</a></h3>
 <div class="details">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales. Donec scelerisque, tellus sed commodo accumsan, augue quam sollicitudin sem, in dapibus velit orci quis massa. Curabitur aliquam, neque placerat condimentum vulputate, quam neque imperdiet augue, eu consequat mi lacus vel justo. </p>
 </div>
 </div>
 <div class="hoverbox">
 <h3><a>Title</a></h3>
 <div class="details">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales. Donec scelerisque, tellus sed commodo accumsan, augue quam sollicitudin sem, in dapibus velit orci quis massa. Curabitur aliquam, neque placerat condimentum vulputate, quam neque imperdiet augue, eu consequat mi lacus vel justo. </p>
 </div>
 </div>
 <div class="hoverbox">
 <h3><a>Title</a></h3>
 <div class="details">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales. Donec scelerisque, tellus sed commodo accumsan, augue quam sollicitudin sem, in dapibus velit orci quis massa. Curabitur aliquam, neque placerat condimentum vulputate, quam neque imperdiet augue, eu consequat mi lacus vel justo. </p>
 </div>
 </div>
 </div>
</div>

I did try removing the "position:relative" for the hoverbox class, but then the "details" areas always appear in the upper left corner, rather than relative to the containing hoverbox div.

I have spent a large amount of time getting this far and I seem to have hit a dead end. I am sure it is just my lack of understanding of the stacking contexts for z-index.

Any help getting those details boxes out in front in IE7 (without them all appearing in the same place) would be greatly appreciated.

thanks in advance!

[swa66]

Might be related to
[webmasterworld.com...]

tru to set the one you want lowest to a negative z-index.

[SuzyUK]

I am sure it is just my lack of understanding of the stacking contexts for z-index.

I'm sure it's not, Stacking contexts would be much easier to understand if it weren't for IE6/7 both get it wrong and both treat it differently, hasLayout, position relative, and stacking contexts just don't work properly in either version :o

As for a workaround, it can't be done with z-index alone because each of your new relatively positioned hoverboxes are always going to higher than the previous one, not because of any z-index/stacking thing, but because they have hasLayout on them (float and width) not that you can change either - it would be the same if they contained an image which menus often do.

There's a trick though: You only need the hoverbox to be relatively positioned so that the details box displays in the right place, and the only time you need that is when the box is hovered on.. so move the relative positioning for the hoverbox onto hoverbox:hover and just have it trigger when required it leaves the other boxes nicely behind it in the race for the top :)

With that, you can actually do this whole menu without any z-index at all, as all browsers like it and it saves getting more complicated.. here's the (simplified for demo) CSS I landed up with;

.hbsection{
margin-bottom:30px;
width:580px;
}

.hoverbox h3 {
padding:0;
margin:0;
color:#FFF;
}

.hbsection .hoverbox a{
color: #fff;
text-decoration:none;
display:block;
text-align:center;
cursor: pointer;
width: 277px;
}

.details p{}

.hoverbox{
background-color: #003466;
padding: 5px 0;
margin: 5px;
float:left;
border:solid 1px #333;
width: 277px;
}

.hoverbox:hover{
position: relative; /* move this to the hover so only the hover box is "lifted" */
background-color: #9aaec2;
color: #000;
}

.hoverbox .details{
position: absolute;
top:35px;
left:9px;
padding:5px;
border: 1px solid #333;
background: #fff;
display:none;
}

.hoverbox:hover .details{
display: block;
}

hth, Swa's post has me re-intrigued I wrote about stacking contexts a few years back but gave up on trying to figure out IE's interpretation when I realised 7 still had problems too

[evilracecarlive]

swa: thanks for your reply. I am bookmarking your "z-index:-1 vs z-index:0" post because I have a feeling this will come up again and again. I didn't get a chance to try it out yet, but I will be experimenting shortly.

suzy: I ended up using your solution. ridding the layout of z-index all-together was too attractive to pass up with IE6/7 on the loose. It makes complete sense and its VERY simple. it never even crossed my mind that this could be done without z-index. go figure :)

thank you both!

[swa66]

I actually ended up using Suzy's technique above today as part of a way too long fight with IE to make a small change. The request was "can this be 1 pixel higher", but that caused a drop down to potentially go just 1 pixel under other tabs in the menu ..., while it should have been over it.

I'm still blurry about all the side effects I had to deal with (like the hovered (now position relative) shifting a pixel down compered to a position:static) item. The solution to this last -oh fun- was to add top:0; Yes, zero, to the hovered state, which in essence is the default value according to the standard -go figure-.

Can't wait for legacy IE versions to be gone. (To avoid far stronger worded expressions.)

Anyway if you missed the gist of suzy's explanation above I strongly suggest to reread it.