All,
If you look at the following webpage:
http://tinyurl.com/7a5htbt
If you scroll over the view recipes in IE8 it goes behind the scrolling images. I'm not sure why because the images have a z-index of 2 and the menu drop down has a z-index of 999. Any idea why this isn't working?
Thanks!
in IE, positioned elements start a new stacking order, causing what you are seeing. Sometimes you can give the parent element a higher z-index and it will solve the issue. Google for IE z-index bug and you'll find a fair amount of text on the subject.
Related
I'm trying to finish up a site but I can't seem to figure out why the popup summaries on the calendar go behind the subscribe buttons at the bottom of the calendar. I'm assuming it's a z-index issue but I can't figure out why none of the z-index css styles work.
The test url for the calendar page is http://powhatan.idtestsite.com/events. To see what I'm referring to go to the bottom of the calendar and hover over "Event 2". You'll see it goes behind the subscribe buttons.
Any help would be awesome!
What a mystery! You have position and z-index set on both elements...
Don't know how much it helps or hurts, but I did notice that the z-index behaves as expected in FF 14. In Chrome, I'm seeing the same behavior you report. Maybe that can help you track it down.
EDIT:
I found a solution - set the btn z-index to less than 0 (I used -1) and it behaves as expected in Chrome. This has to do with the lowest z-indexed item being absolutely positioned and the highest being relatively positioned. Sometimes those absolutely positioned elements write on top of relatively positioned ones, even though the indexes are set correctly.
I added the following to my CSS and elemented all other z-index styles that pertained to my calendar and it worked like a charm:
#ai1ec-calendar-view-container {
z-index: 1 !important;
}
I worked on a solution since 2 days but i can´t find the problem.
The Problem is that my Navigation/menu is behind a slideshow in the header and that´s only in IE.
All other Browsers worked fine.
Here is the URL: http://ditzinger.de/wordpress/bahntechnik/
Can anyone help me please?
In Internet Explorer positioned elements generate a new stacking context,
starting with a z-index value of 0. Therefore z-index doesn’t work correctly.
giving the parent element a higher z-index actual fixes the bug.
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Set the higher z-index value into your sub-menu class with position.....
I am struggling with z-index for popup (newsletter signup) and it is still underneath the navigation and its dropdown. I googled and found out that relative + zindex gives IE bug but I added in z-index and they either go under or top of each other. Right now I cannot figure why it is behaving weird.
I am wondering whether the header and the navigation are conflicting with each other in z-index? Any suggestion or anything will be appreciated. thank you
To #header, add z-index: 101.
It's 101 because something has a z-index of 100: I suspect it's div.col-left.
I forget the exact details of the IE bug in question, but the fix in this case is applying a higher z-index value to the parent element.
Issue is Menu is not overlaping or float, above the IFrame i am design the menu with table and Div tag in Usercontrol From and i called Usercontrol from in the Index.aspx.
If any got the idea or experience to solve this issue please help me Thanks for Time and help
Hari
Most likely, you are running into an issue with z-index. For your menu, set the z-index for it and all of it's child controls to a high number, and then set the z-index on the iframe to a low number. If this doesn't solve your problem, you are going to need to continue setting the z-index in the parent elements of both your menu and your iframe because in some (all?) browsers, z-index does a sort of propagation, where if a parent has a lower z-index than one of its siblings, then the sibling will get priority and end up on top.
You also need to make sure that your elements have the css position property set to something other than the default, because z-index only works with positioned elements.
There are also known issues with older browsers with regards to iframes, so if you are using an older browser, try something more modern.
iframes are a tricky beast, so you are really going to have to experiment with various things to figure out your exact issue. I could provide more information, but I would need to see an example of your HTML/CSS where it isn't working.
A site I am developing is giving me some serious issues in Internet Explorer 7/8. On certain pages, the navigation goes underneath text and images. I'm rather confused. I've tried adding a z-index of 1 to the content and a higher Z-index to the navigation, but it is to no avail.
The link to the site with the problem and respective CSS file:
http://exitbellaire.com/exit-air.php
The CSS file is /style.css.
I just fixed it. I removed a position:relative tag from a div and things started working again.
I think you might need to add the higher z-index attribute to the .sf-menu and other #navigation element CSS as well, in addition to the base navigation div.
Z-index doesn't have any effect on a normally-positioned element. Try adding "position: relative" to the items you've put a z-index on, one at a time, and see if there's any change. Older versions of IE have a bad habit of looking at parent z-indicies, so that while something might have a z-index of 10, if its parent has a z-index of 1, the 10 will not show up over other elements with lower z-indicies.