IE7 z-index 2

[ca8msm]

Can anyone spot why my z-index isn't working as I expect it to on IE7? The functionality which is want is working in Firefox and Opera where if you hover over a person's image, you get a CSS div tag pop up to display some details. This overlaps the next image correctly (in front of it), but in IE7 you'll see that the next image shows through the pop up which is not what I want. Can anyone see what is wrong and how to fix it?

http://site412.mysite4now.net/ca8msm/AEL/People.aspx

Thanks,
Mark


------------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions

 

[Vragabond]

The problem is more deeply rooted than you think and IE7 has the right to render it the way it does. Because z-index works among the siblings. Say for example you have two sibling divs that overlap, one with z-index 3 (let's call it red) and one with 1 (let's call it blue). The red one will be on top. If you put another div with z-index 100 (this one will be yellow) in the div with z-index 1, the red one will still be on top, since yellow is a child of blue and blue is on a lower layer than red. If no z-index is specified, then elements lower in the code will be on the higher layer.

But of course, z-index only affects positioned elements. So, when element is statically positioned (default position state), any positioned (relative, absolute or fixed) element with a non-negative z-index will appear above the non-positioned element. Let's simply say that non-positioned elements are all on z-index 0.

Now we come to the problem. Your person divs are relatively positioned. That means they are no longer on z-index 0. And since they (each specifically) do not have a z-index, it means every successive one is on a higher layer. As was mentioned in the first paragraph, anything that is within the div, regardless of its individual z-index will be below the next div, because person divs are siblings and all other elements are their children. Therefore even z-index 999 inside the first person will be lower than z-index 1 in the second person, because the whole second person is higher.

Ok, so let's fix it now. You can float them to the right. Then they will follow each other different way and the last will appear the first and you're ok. But that might not work for you. A more intelligent solution is to get rid of the relative positioning on the person div. I know, you need it to position the tooltip. But, knowing that without any values on their position (top, left, right, bottom), absolutely positioned divs will appear just as if they would normally follow the document flow. Using this knowledge and some negative margins, you can achieve the same result as you have, doing something like this:

.person {float:left; width: 110px;padding: 10px 40px 10px 0; [s][!]position:relative;[/!][/s] }
.person img {margin: 0 auto;text-align:center;[s][!]position:relative;z-index:1;[/!][/s]}
.person span {text-align:center;[s][!]relative;z-index:2;[/!][/s]}
.person .tooltip {[!][s]display: none;[/s] position:absolute; left: -9999em;[/!] }
.person:hover .tooltip {[!][s]position:absolute; top:2em; left:1em;[/s] left:auto; margin: -110px 0 0 1em;[/!] width:15em;border: dashed 1px #f00;background-color: #fff5f6;padding: 5px;z-index:999; display:block;}

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[ca8msm]

Therefore even z-index 999 inside the first person will be lower than z-index 1 in the second person, because the whole second person is higher.

Thanks, that makes your prior explanation very clear.

Ok, so let's fix it now. You can float them to the right. Then they will follow each other different way and the last will appear the first and you're ok. But that might not work for you.
...
Using this knowledge and some negative margins, you can achieve the same result as you have, doing something like this:

I think I'd prefer floating the elements as a solution over the negative margin approach, although it's very good to know that there are different ways to tackle to problem. I think I'll have a play with both methods tonight and see which one I prefer before making a decision on which one to use.

Once again, thanks for the valuable help.


------------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions

 

[Vragabond]

Negative margin is not as bad as it sounds. You're just pulling your information box over the picture and you always know how tall your picture will be. Usually working with negative margin can be pretty tricky and might cause a lot of problems, but in this case I would recommend it. It is a very controlled environment and it will probably yield the best results.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[ca8msm]

OK, I'll bear that in mind when I do my testing.

Thanks again.


------------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions

 

[ca8msm]

Just an update to the thread. I decided to go with the float approach so the person class became float:right instead of float:left and it was wrapped inside a fixed width div. I'm sure it's just a personal preference but it seems to me that it's less fiddly than using the negative margin method.


------------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions

 

[cLFlaVA]

nice explanation, AZ.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]