I have a menu that is dropping behind other elements - I have tried z-indexing on what I thought were the relevent parts, but to no avail -
Can anyone tell me what I need to do to make this dropdown be on top of other elements in IExplorer? Looks fine in FF, Chrome, Safari - thank you for your help
Beta testing site: http://bit.ly/Hb0RJz
Has to do with the stacking context of the elements. Since the two elements have different stacking contexts, z-index won't work. Take a look at this page.
Also answered here: IE7 dropdown menu appears behind image and CSS Dropdown menu hidden behind content IE7
Related
I have a problem with our website at www.eat.vn. The site is fine in Firefox, Chrome, IE8 & IE9 and Safari, but in IE6 and IE7 we have a problem with a main design element.
Please see the attached image and you will understand that the stacking effect on the tabs is not what I wanted. I have tried to work around this bug, but can't manage to find a solution which does not mess up anything in the other browsers. Any help would be much appreciated!
I don't have IE6 or IE7 to hand to test this, so I'm shooting in the dark somewhat.
My guess is that the issue is related to the container element for the tabs (<div id="steps">). This has a style of float:left;, which I don't believe is necessary; it doesn't need to be floated since it doesn't have any other elements next to it.
However this float may be causing the IE6/7 bug; it looks as if this element has decided that it should only be as wide as one of the tabs inside it, which is then causing the tabs to wrap beneath each other.
I would therefore suggest taking the float:left away from this container element, and see if that helps.
(The tab elements inside it should still be floated, of course)
These are IE7 Only problems:
Navigation Problem
The active tab "jumps" whenever a user hovers on an inactive tab.
Screenshot:
http://dl.dropbox.com/u/6688069/navi.jpg
Search Filter Problem
I can't seem to get the height correct in IE7 without breaking the functionality.
Screenshot of what is should look like:
http://dl.dropbox.com/u/6688069/filter.jpg
Thanks!
What I'm seeing is that in IE7 this element:
<ul class="multiselect" id="multi-filtercountry"/>
is causing it those list items to expand... I also noticed that in Chrome, a real browser, none of those sidebar elements are expanding their parent. That means to me that you have one floating element in there somewhere, and the others aren't.
If you use Chrome's developer tools and mouse over the elements inside <span class="expanded"> you'll see that their position is determined to be up top, meaning they aren't flowing properly.
My best advice is to try to look at this not as an IE7 problem but a markup problem in general.
You can see my issue here:
http://pmind.com/staging/123.html
I've tested this in Chrome, Safari, Firefox and Opera so I know it's not just an Internet Explorer wonky bug.
In the top right of the content, there are two text links, that are being hidden under the graphic. The <div> that contains the text links comes further down in the page, and my understanding was that that alone would make the z-index of the links such that they would be on top. But because that didn't do it, I set the z-index of the <div> containing the text links manually, which still didn't fix the problem.
One partial solution I found was to set the z-index of everything on the page but the <div> to -1. This however broke the roll-over functionality of the navigation items. I hate to ask something like this, and then it be some extremely simple issue I've just overlooked, but I'm at my wit's end.
Adding "position: relative;" to #top_links brings them to the front in Firefox. I haven't tested this in other browsers.
Has anyone got any idea why the menu is rendering below the rotating images on this site in IE7: http://new.coffeelatino.co.uk/.
The z-index is much higher for the menu that it is for the rotating images.
Just another reason why IE is so dreadful.
z-index is ignored for elements that are not positioned. Add "position:relative" to the style of whatever you're trying to apply a z-index to, and that should fix it.
Hint for remaining sane as a web developer: Write against IE, then test with other browsers. Most things that work in IE will render correctly in FF and Chrome. The reverse, as you've noticed, is not true.
If you look at the menu for this site: http://writershore.com/ltlaw/
The menu looks great in Firefox, Chrome, etc, but in IE7 the menu drop downs don't break through the nested DIVs.
Is this an overflow issue? A z-index issue? I've tried variations of both and doesn't fix the result in IE.
Thanks for any ideas!
The HTML code is broken. For starters you have two <html> tags. This will make the page render in quirks mode, which makes a dramatic difference for IE.
Fix the obvious errors in the html, then validate the page to see if there are any more problems in the code.
IF form elements or boxes are showing over top of the DIVs such as calendar popups it's not a bug in the javascript - it's a bug/feature of browsers. See this explanation