I've altered the CSS of the NAV on this website and now it only functions in Chrome but not Firefox. Drop Downs exist on 'Menus' & 'Catering'. It was developed in WordPress and I assume I am missing something when it comes to the coding in WordPress.
Any ideas?
http://sbserver.wwwsd3.a2hosting.com/devo_williams_freshcafe/
If you reload your page and hover over the navigation item as it loads, you'll notice that the submenu actually is working properly - it appears, but is subsequently hidden as the #main-content element animates in.
I'm not sure as to why this is happening, since your z-index:999999 on the submenu should certainly override the z-index:999 of #main-content. (I'm fairly certain the maximum value for z-index is a lot higher than that.) For some reason though, 999999 is being treated the same as 999, and the main wrapper is appearing over top of the submenus.
Fixing it requires only slightly decreasing the z-index on #main-content. For example, using:
#wrapper.boxed #main-content {
z-index:998;
}
This worked for me (tested in Firefox 20), and the submenu appears above the main wrapper. Hope this helps! Let me know if you have any questions, though I'm frankly a bit puzzled by this as well.
Related
I'm seeing some strange flickering in a JS submenu implemented using jQuery.hoverIntent on this page here. The flicker only occurs over images that are further down the page, hidden by the appearing menu in Chrome and Firefox and the whole menu actually renders behind those images in IE7. Weirdly, the previous implementation (here) works without the flicker. I'm fairly certain that it's CSS issue, since we are in the middle of a refactoring in which we're trying to consolidate stylesheets and scripts. Any help is greatly appreciated :)
EDIT:
Although my initial answer below still works to fix the issue, here is the real cause of the issue and a better fix.
The image further down in the page is in a positioned div (which is position relative). When the menu loads, it sets the z-index last. If you specify the z-index in your stylesheet, the fade will work and it will no longer flicker. This worked for me while inspecting:
ul#topMenuJs li.qnav0>div {
z-index:5;
}
OLD ANSWER: You are seeing the flicker because you are fading in the dropdown menu. You can do two things:
Get rid of the fade altogether and just do a .show() on the dropdown
Give the ul#topMenuJs li.qnav0>div an opacity:1 !important; to override the js
The latter I tested and it works.
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.
I am building a site on Drupal usiong a custom theme based on the zen theme and using the nice menus module to generate a horizontal sons of suckerfish dropdown menu. My horizontal nice menus block works brilliantly in all browser (even in IE!) but seems to break in firefox, which is extremely unusual.
The second level menu should drop down directly below the top level menu item, which it does in all browsers except firefox (I am currently using 9.0.1). When I open the 2nd level menu in firefox, the 2nd level menu is displayed below the first (as it should), but left aligned to the left of it's parent menu, instead of being aligned below it's parent menu item. Any ideas?
Here is the url: http://www.crowstonstack.co.uk/new
change the value as per below in http://www.crowstonstack.co.uk/new/sites/all/modules/nice_menus/nice_menus_default.css
This should fix it.
ul.nice-menu-down ul {
left: 57px;
}
This solution is only for firefox and might break the look in other browsers. So once you confirm its working you will need to put it as a condition. for more on this go to
Targeting only Firefox with CSS
Cheers,
Vishal
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 installed the Boldy theme from site5 on one of my projects and have run into one major problem.
When browsing in internet explorer (8 or lower), the top dropdown menu gets displayed behind some other elements (main content slider, H1's etc.). I've tried everything from changing all the z-index's to fixed positions, with no luck.
You can view the problem by visiting site5's Boldy demo page http://wordpress.site5.net/boldy/ and hovering over the top menu's blog tab in IE.
I have asked site5 to look into it, they are aware of the problem, but have failed to find any solutions.
Ok originale solution here - Swiss credit website. This works but uses a complicated z-index solution.
Here is very simple and improved solution here - Jeyjoo stock image gallery
This works in IE6+, firefox, opera, safari and chrome
Solution
The HTML
<div id="container_page" class="container_page">
<div id="container_header" class="container_header">
NAV BAR GOES HERE
</div>
<div id="container_body" class="container_body">
...body text...
</div>
</div>
The CSS
#container_page #container_header {position:relative;z-index:2;}
#container_page #container_body {position:relative;}
why it works
You have to tell IE how the two divs relate to one another.
(not my script) Pretty sure i may have found the answer to this on here, but i cant find it. Either way, this worked great for me...
$(function() {
var zIndexNumber = 1000;
$('ul').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
just make sure your css includes position and z-index so the script can access the values.
kudos to whomever came up with this - saved me a whole lot of trouble.
If I'm not mistaken, IE is not properly inheriting the z-index from the top-nav for the children li items in the menu. That is why the Photos with a z-index of 60 are covering it up. You can do two things here.
Eliminate the photo z-index.
Directly specify a z-index of 100 for the sub list, not just the top-nav list.
I see you still havent solved this on.
I found a solution here on a submenu - Chkredit - swiss credit website
Works in all versions of IE and is light and 100% CSS (no javascript).
Basically the problem was that IE does not use z-index correctly.
Check the z-index's in the CSS code. Yo will need to put a z-index -1 on the items your menu is hiding behind.
I working on exactly the same problem for my own image gallery right now (go to "top image" page) - jeyjoo image gallery