Forum Moderators: not2easy
heres my css snippet (its from my css nav menu)
.pro_linedrop ul li:hover ul li:hover ul li:hover ul li {
position:relative;
top:-25px;
left:75px;
z-index:999;
}
if i remove the z-index:999; from the snippet, then the menu falls behind its parent menu (which isnt supposed to happen in the first place :P) but when i put it there, it stays on top of the parent menu EXCEPT in IE any idea how to fix it?
"You should set the z-index on the position:relative elements (and not on the absolute elements within it if you have any).
Also note that when setting the z-index for a positioned element, a new z-order stack will be created for the child elements."
Here's the link :<>
I hope this helps you!
[edited by: SuzyUK at 9:22 pm (utc) on Aug. 7, 2008]
[edit reason] sorry no personal links, see charter [/edit]
and thanks
and it still didnt work.
here is the css i added for IE only
/*div*/
.pro_linedrop {
z-index:100;
}
/*div ul*/
.pro_linedrop .select {
z-index:200;
}
/*div ul li*/
.pro_linedrop .select .line {
z-index:300;
}
/*div ul li ul*/
.pro_linedrop .select .line .sub {
z-index:400;
}
/*div ul li ul li*/
.pro_linedrop .select .line .sub li {
z-index:500;
}
/*div ul li ul li ul*/
.pro_linedrop .select .line .sub li .sub1 {
z-index:600;
}
/*div ul li ul li ul li*/
.pro_linedrop .select .line .sub li .sub1 li {
z-index:700;
}
/*div ul li ul li ul li a*/
.pro_linedrop .select .line .sub li .sub1 li .stay2 {
z-index:800;
}
/*div ul li ul li ul li ul*/
.pro_linedrop .select .line .sub li .sub1 li .sub1{
z-index:900;
}
/*div ul li ul li ul li ul li*/
.pro_linedrop .select .line .sub li .sub1 li .sub1 li{
z-index:1000;
}
/*div ul li ul li ul li ul li a*/
.pro_linedrop .select .line .sub li .sub1 li .sub1 li a {
z-index:1100;
}
i even took away the z-index from all the absolutely positioned elements. nothing worked.
It looks like you need to add "position:relative;" to the css right before the z-index statements. Z-index won't work unless there's some sort of "position:..." statement in there.
So, for instance, the first css element would look lke this:
.pro_linedrop{
position: relative;
z-index:100;
}
Once again, I hope this helps...
.pro_linedrop {
z-index:100;
}
is previously being absolutely positioned, but i still tried changing it to relative and it didnt work >.<
At the risk of sounding really boring, at least to those that may have read some previous posts this is another side effect of hasLayout, If you've read anything in the past about the sequence of events which leads to understanding IE you'll perhaps figure that the cure that most will use is to trigger hasLayout to true by adding a width or height or zoom: 1; (or more) - or sometimes you'll be told to add position relative because "it helps IE and doesn't affect anything else" - sorry, but if you're advised to add position: relative; for any other reason that making an element into a "containing block" there will be trouble
Apparently (according to the W3C rules) you can add position: relative; to any element and it won't affect anything unless you actually use top/right/bottom/left co-ordinates (to do your offsetting), the only "side effect" is that it makes the element it applies to into a containing element.. this means you can position further elements inside it.. the only official documentation on IE's hasLayout recommends that if position: relative; is set then also hasLayout should be triggered on the same element.
WELL that's the theory, however the practice as always is not quite right, BrianRKoch has it right, z-index ONLY applies, or *should* only apply if the position property is set to relative or absolute, and the z-index value is set to anything other than the default - so from your initial code those z-indexes are doing nothing
As mentioned above any element is NOT SUPPOSED TO start a new stacking context(layer) unless the z-index value is set to something other than the default (auto) and also has it's position property set to anything oother than default (static). However the sad news is that IE does (or did last time I checked) usually start a new "stacking context" as soon as either hasLayout is set to true or position: relative is even mentioned, never mind a z-index order :(
Then you have to realise that the actual z-index values themselves are based on the *local* stacking contexts (i.e setting 500 or 1000 on an element doesn't matter a monkeys if you're trying to base it on the wrong local context
and it's worse when you're using the right context but IE's hasLayout or position relative is setting another one you don't know about :(
so.. short answer is there's not a rule of thumb yet if you need to support IE :o, and I'm not sure this one is at the top of the list of fixes.. so my eternal advice has always been, set position: relative onto a/the :hover itself
- once an element is hovered on, the rest of the page has already rendered, if you then need something to appear on the "stack" it should only be appearing relative to the hovered item
point number 2, is that if this is not to do with hovered effects (again I am going by all the :hovers in your original post) then I'm pretty sure you don't actually need position: relative; and that top and bottom margins will do your placement for you, thus removing the need for the position relative rule and removing the stacking problem ;)
