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
Related
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.
I am having a problem with the drop down menu on my website. I used the suckerfish menu and changed its css a little. You can see the website here.
The menu and slider plus the expandable div on top work great with Chrome and Firefox but there is something wrong going on with the drop down menu in Internet Explorer.
I moved the slider lower to check if its because it drops on top of the slider but its not it. I believe its z-index related but can't figure it out!
Try adding this to the menu's ul element:
z-index:999;
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
I've got a flyout menu on a site that I'm building. I'm using a UL nested within the LI. In Firefox it's working beautifully but IE breaks it. (The Pants & Shorts link is the only one with a flyout so far)
Here's the site (a work-in-progress so it's not quite all there):
http://epalla.com/bogeypro/featured/covert-cooler.html
If I set:
.bogeypro_catmenu ul li {
position: static;
}
the submenu does become visible in IE, but in IE6 it flys at the top of the page (absolute positioning is NOT relative to the LI) and in IE7 it still doesn't fly above the product image.
any ideas?
have you seen suckerfish menus? http://www.htmldog.com/articles/suckerfish/dropdowns/
As it turns out, IE7 was taking a dump over the opacity filter. I started from scratch and redid everything from the ground up. I had it working beautifully in both browsers and was wondering what I'd done differently - then I added the opacity filters back in and voila, duplicate results.
I've removed the IE opacity line (below) and all is working beautifully
filter:alpha(opacity=92);