I have a z-index (well, I think) issue on this website : http://dev.golfuse-ag.com/
I had to use a 100% width+height div to create an extra background. Now, in IE8, I get this z-index interpretation issue even if I had a greater number for parents elements.
The DIVs in questions are #bckg, #wrapper and #mid
Tried a bunch of crazy things and... nothing close to OK.
If anyone can give me a hand with this one, you are welcome.
Thanks.
Ie will not let you have parents with lower z-index than child.
You can try z-index: -1 on your parent if you want, but i'm not sure it will work. IE does not interpret z-index like you want :S You'll probably need to put your background on another element, out of this element.
Related
I am struggling to make a webpage backwards-compatible with IE7 (I know, 'IE7?!', but that's what is on our school computers). I am trying to show a div the full size of the page to darken the body and show two specific divs on top of that. However, when I view the page, the dark div appears over all other elements on the page - even those with a higher z-index.
You can see the page here and view it in IE7 using netrender.
I have applied positioning to all of the elements and it seems to have done nothing. Maybe it is just my eyes?
I think if you pulled the modal box div out of the #wrapper div, it might work. It appears older versions of IE compare sibling z-index values, so the #blackBg div is comparing itself to the #wrapper div, which has its z-index set to auto. If the modal box was a sibling to both and had its z-index higher, it just might solve the issue.
As far as I am concerned, it is not possible so I gave up in the end.
i build an hover-effect using CSS only. It works fine in all browsers except IE7.
Visit the page or view a screenshot.
As i read, it's because:
In Internet Explorer versions 6 and 7, the stacking order of z-indexed elements is essentially “reset” for any elements that are contained by a positioned element, regardless of wether or not the container (or parent) has a z-index value set. In other words, an element with a z-index value of 100 will appear underneath an element with a z-index value of 1 if the former element is contained by a positioned parent, and the latter is not. This is an incorrrect implementation of the z-index property that has evidently been corrected in IE8.
But how can i fix this IE7-bug?
I think you may want "z-index" instead of "zIndex." I've never seen or used the "zIndex" string. However, I am not sure if this will fix your problem.
Try adding position:relative; to your style. z-index bug for ie7 is pretty popular. Here is a link that explains more about it.
I've seen this behavior for years. Checkboxes and radios buttons can not be covered by DIV elements. No matter what z-index use.Is there some solution?
Besides, I am using simpletip (can't use qtip). If you know about another jquery tooltip ready to use that work around this... I have my wallet open. THX
Ok, now we can work.
First off: This probably has nothing to do with your problem, but it can lead to other problems: Your HTML is riddled with errors:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fnomikos.info%2Fprivate%2Fwp%2Foptions-general.php.html
Most importantly a span may not contain a block element such as a div. Most of the errors is because you are using HTML syntax instead of XHTML syntax. It maybe easier just to use a HTML DOCTYPE, than fixing all the XHTML errors.
Your actual problem is that z-index only applies to elements that are positioned (absolute, relative, fixed) and since your "tooltip" isn't z-index has no effect.
You'll need to explain what you want it to do. Until then I can just give general suggestions:
You could make sure that the "tooltip" doesn't become wider than the surrounding span. Currently it's 300px wide and since the spans are flexible it spills out, when the spans become too small.
Or you give the "tooltip" position: absolute and smaller top and left values (BTW the current top and left values are currently useless, because they also only apply to positioned elements) and it's parent span position: relative.
I have a form that uses a div that is positions over some input elements. For some reason, those input elements are above the positioned div, even though the div has a high z-index. Really not sure why this is happening, as the input fields don't even use absolute positioning, so I would think they would never be on top of another element.
Example (Click into Person, Status or Residence field):
http://www.puc.edu/puc-life/funnybook/little-black-funnybook
It looks like you don't even need to set a high stacking order for the .item .answer selector, at least in the Gecko engine. Try removing the position and z-index and see if it's consistent x-browser?
Edit: Ah I forgot I had applied position:relative to the div.item element, can you try toggling that when it shows up and unset it when you hide it?
That or leave position:relative on all div.items through external CSS and toggle the z-index to be '2' when the stuff pops ups and back to auto when it's hidden.
z-index is the solution but it does not work proper with youtube movie iframe, for that you would have to use wmode='transparent'
I'm working on an application with a map and there is a div in the corner with some stuff in it. You can click on this map to bring up some information in a little window. The window is, in some cases, being covered by the div in the corner.
I want the opposite effect (window covers div). I figured this would simply be a z-index issue but I'm unable to get it to work. This is with IE7 and from reading up a bit it seems like z-index won't work unless it's inside of an element that is positioned.
The elements seem to be positioned properly to get the z-index to work right but I'm having little luck. I've played around with adding styling via Firebug but haven't had any luck in getting anything to change. The window really is just two divs one absolutely positioned one and a relative one inside of it.
Is the z-index the only thing that could be the problem here or is there something else I don't know about?
Are there any other methods to achieve the effect I want? I cannot simply hide the div via jquery or something because part of it should be visible from behind the window that opens on the map.
You are hitting the stacking context bug
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
Every positioned div in IE will create a new stacking context and prevent z-index from diferent stacking contexts to come on top of others.
The solution is to have the window you want on top up in the tree (into the body for example) and z-index value grater than z-index of all parents of the other div covering your window.
Extensive information to understand the problem here:
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
positioning and negative margins is the only way to get elements to overlap that i know of. z-index is just used to explicitly tell the browser how to layer the elements.
as to your problem, IE requires the container elements and/or elements that you are overlapping to have position:relative; or position:absolute; for z-index to work properly. When someone say positioning they're usually implying having the position property set in CSS. Also when working with z-index make sure that the overlapping elementa are at the same level with each other.
Hope this helps
Quite simply, the order of the elements in your HTML file will determine stacking order. If you want an element to be above another then make sure it comes later in the HTML.
You can only swap the stacking order on elements that are all in the same containing element. For example if you have two divs and they both contain 3 images you cannot make images from the second div go below images from the first div.
You need to plan your HTML ahead if you need complex stacking orders.
As hinted by the other answers, position:relative and position:absolute reset the "stacking-context" in IE.
If you want a lazier answer you could use javascript and hide the div when you click on the map, and show it when you close the map.
You will have to do this with any selects on the page anyway because in ie they don't work with z-index.
I ran into this same issue a couple days ago and found the negative margin as suggested by Darko Z worked great. (My rep isn't good enough yet to vote for Darko)
I wrote a quick post on it.
http://www.swards.net/2009/03/layering-html-elements-without-using.html