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.
Related
There are 2 menus in the following site:
http://lastshredsofsanity.com/
I am not sure why this theme is being used this way, but it is how the person made their site. I had fixed this issue before and somehow 3 days later the top menu, when you hover for the child pages, it goes under the second navigation menu. (If you hover over the Shewed Designs, you will see what I mean.)
Now, I thought this was a z-index issue. However, I've tried.
I must not be seeing it, as this is a simple CSS fix and I asked my friend to not touch the CSS until this issue is fixed.
I checked Google and Stack overflow, applied a couple suggestions, but to no avail, I think I am just a little too close at the moment to the project and missing something so simple it is nearly stupid.
Not sure what order you're loading your CSS files, but #catnav has a z-index of 999, whilst #topnav is never assigned a z-index value greater than 5. Since they are both id'd elements, I think the specificity is equal on both, so it becomes an instance of "last rule applied wins." To test this, you could add an embedded style attribute to the #topnav <ul> element with a z-index rule that is higher, like 9999.
HTH.
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.
EDIT: Solution found. The pink block had overflow:visible !important, which in Internet Explorer invalidated z-index. After removing it, the logo came to the top.
See: http://bit.ly/i7ER3e
See logo "**" (beside top menu) with Firefox/Chrome, it correctly appears above left-content block (the block with pink background).
In IE7/IE8 the logo, it becomes hidden behind the pink block.
I've been messing with this for 2 hours now. Tried a lot of stuff. Can't get it to appear right in IE7/IE8.
Any suggestions?
(Note: I'm working in a really restrictive framework where I cannot simply float the logo before the menu. I have to use position:absolute to place it.)
The problem is not z-index in your case
your body has some line height which is not sufficent...
line-height:180%
change this to 200 or so it works, but still that is not good approach
but just found the issue....
Try using:
z-index: -1;
for the elements that should be below the logo.
try setting position:relative; as well as the z-index.
The default position style is position:static;, and IE has bugs around the z-index handling when combined with static positioning; setting position:relative can solve some of them, without affecting too much else.
See this page for more info. (the link is for CSS3Pie, which is an IE hack to help it support some CSS3 features like border-radius, but the info on the z-index bug is general and likely covers your issue as well)
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.
I have an ASP.NET application that renders a 3rd party (Telerik's) menu control under
another control (RadDock) when the menu expands.
This artifact ONLY happens in IE7. Not in Safari/FF/Opera/Chrome (Have I left any out?)
The menu control needs to be rendered OVER the other control.
I have Google'd this a fair amount, but have yet to find a simple solution to fix it for IE7.
What is the easiest to solve this problem for IE?
Also do you know if this z-index problem has been resolved in the (pending?) IE8?
This Q is not meant to start a browser flame war. Please only respond if you have a
relevant comment.
Thank you kindly.
I don't know if this is similar or not, but I had an issue with z-indexing where when the z-index was applied to the elements of a container, but not to the container itself, the z-index wasn't being properly applied to the child elements. This manifested itself as background borders appearing over the top of the menu items that should have been on top. I solved the issue by applying the same z-index to the container holding the menu items. I don't know how the Telerik controls set up their CSS, but you may want to check that the class being assigned to the container has an appropriate z-index as well as the menu items themselves.
I've had some problems like that before, although not with the 3rd party controls you mentioned. Check to see if either of the controls sets it's own z-index conditionally if the browser is IE. If that's not the case, try setting a specific z-index for each of the controls (or their containers) to make sure IE doesn't fall back to some sort of default unknown z-index.
If the z-index changes do not fix it, it may actually be a positioning problem rather than a z-index problem. Positioning problems are quite common (from my own experience) when you try to do cross-browser compatibility.