I am facing a problem with my navigation drop down menu hidden behind container class in IE(internet Explorer) browser but its working fine with all other browser.
I am stuck with this issue for 3 days. I tried too much to change css of my container class and my navigation class but failed :(.
I tried even display and visibility properties in my css but failed...
Please give me hint how i can fix this problem
here is my site
http://napodfw12.wildapricot.org/
if you open it in all other browsers than IE drop down of menu bar will display but in ie it is hidden,
i am uploading screen shot of this problem too.
IE is very annoying about z-index. I found that creating an IE stylesheet and setting the container and nav position to relative, then adjusting the Z-index seemed to work for me.
Related
I've been struggling with this problem for a few days now. Navigation bar on my page hides browser scrollbars. This happens in Chrome (both desktop and mobile) and Firefox - I didn't chceck other browsers yet but I suppose the result will be the same.
I tried like every single solution I found on Google and Stack Overflow but none of them fully worked. The navbar either kept covering the scrollbars or it wasn't clickable because it was under the rest of the page.
Can somebody browse my CSS and help me with this problem? Thanks a lot!
P.S.: I use no CSS framework. I downloaded the template from here and sligtly modified it.
I would not consider myself a CSS newb (noob?) but this problem has me stumped.
I have a navigation header area with the position set to initial. In IE, however, the page is acting as if the navigation area is set to position:absolute and the page content bumps up and starts underneath the navigation rather than right below it. There is an older CSS declaration which does set the navigation to area to absolute, but this is (should be) overridden.
I have tried adding !important to my "initial" declaration.
I have tried changing it to "static", but then you can't click any of the navigation links.
I could go back and remove the old absolute declaration (and probably will) but I'm genuinely curious as to how to overcome this behavior in IE. I have tested in all other browsers including Android and OS and it displays as expected, however ALL versions of IE, including IE11 on Windows 8.1, give this navigation area absolute positioning.
You can view the problem live here: http://inrvu.flywheelsites.com/sign-up-pricing/ The "Get Started Now" should start below the nav, not at the top of the page. You'll need these credentials to view un: flywheel pw: bizarre-villain
I appreciate any help!
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I have a couple dropdown menus that are giving me issues in IE7. I've wasted the entire morning trying to fix it. The client is monitoring the site using IE7 so it's a top priority.
I've got a live demo and a jsfiddle demo set up. Here is the actual site I'm working on today as well just for reference, but the demos have the problems isolated. I left some of the reset css and such in case any of it is related.
There are 2 problems:
Most Important: There are z-index issues with the top menu and the header content in IE7. The headings are above the dropdown.
Less Important: There is a small gap in the top menu between the first link and the dropdown that sometimes causes the dropdown to disappear when moving the mouse to it from the top link. This occurs in at least Firefox 4 and IE 7. This issue doesn't occur in the bottom menu.
I removed javascript, tried removing any clearfix css, whittled down the css and html, switched from html5 to xhtml1 strict, played with the position and z-index properties, and read several articles here and elsewhere about z-index bugs in IE but I still can't get this one to budge.
I don't care about IE6 support or if I have to use javascript, I just need to get it working in IE7 for the client. Any help is greatly appreciated.
To #header and #nav add:
position:relative;
and
z-index:10 //for #nav
z-index:0 //for #header
I have a div and an iframe on the page
the div has
z-index: 0;
the iframe has its content with a popup having a z-index of 1000
z-index: 1000;
However, the div still overshadows the popup in IE (but works fine in Firefox).
Does anyone know what I can do?
Explorer Z-index bug
In general, http://www.quirksmode.org/ is an excellent reference for this sort of thing.
Which version of IE?
I'm no javascript guru, but I think hiding the div when the popup pops might accomplish what you need.
I've had to work with divs and iframes when creating a javascript menu that should show overtop dropdown boxes and listboxes -- other menu implementations just hide these items whose default behavior in IE6 is to show on top of any DIV, no matter the z-index.
I face the same problem. The problem in my case is that the content in the iframe is not controlled by IE directly, but by Acrobat as it is a pdf file. You can try to show the iframe without the content, in which case the popup displays normally. For some reason IE is not able to control the z-index for external helpers.
It was tested with IE7
Without seeing your code, it's difficult to determine the problem. But it's worth noting that z-index only works when the element has been positioned (e.g. position: absolute;), so perhaps that could be an issue?
There's a good article on CSS Z-index from the Mozilla Developer Center.
Without seeing a code snippet, it's hard to determine what the issue is. You may want to try appending an iframe under your popup that is the same size as your popup. With IE7 if you render the iframed popup after the other iframe has already loaded you should be able to cover up elements that are beneath. I believe some JS calendars and some lightbox/thickbox code does this if you are looking for examples.
never set your z-index to anything bellow 1 enless you want to hide it. I'm not sure about 7.0 but older versions of IE I've had issues with doing that. IE doesn't like z-index that much. Also check your positioning. Positioning may be your issue. sorry, i don't have enough info to help you further.