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);
Related
I'm developing a new website.
Testing out the page in different browsers, I find that the nav bar renders differently depending on the browser. In Chrome and Safari it looks correct, but in Opera, IE and Firefox the nav bar renders differently. I've validated the HTML, I'm not sure what to do.
Looks like you have a problem with floats after unfloated content - very similar to a question I just answered:
CSS issue with IE8
Let me know if reviewing that question gets you going in the right direction.
Your UL is styled up in the right corner. In IE hit F12 and start going through the +'s of code and you can find under nav role, the UL is way off to the right. I would start editing CSS in the nav role and ul first.
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'm having an issue with my navigation, the first list item appears to have a huge gap on the right.
I have a list of links inside an UL each have their own class so I could set a background icon to them. The first link has a background to give it the rounded effect.
I used relative to push to left so it would have that rounded effect for the hover and active states on the homepage and hover for when i'm on other pages.
Now it all works fine in new browsers apart from IE7 and probably older versions.
I've put it on JSFiddle to make it easier to view.
http://jsfiddle.net/datastream/Gta3h/2/
and http://eminemforum.net/navtest/nav2.html
Thanks
Live Demo (edit)
I got rid of <div id="navHold">.
I removed right: 40px from #topNav2 .home-icon.
I changed the width of #Navigation-Holder from 750px to 830px to make it appear the same width it was before I changed anything.
I've tested that this looks consistent in: IE7, IE8, Firefox, Chrome.
Greetings -
Struggeling with a three-level css menu.
Works fine in FireFox and Opera for mac, but in Chrome and Safari the third level "sticks" or "hangs" as a watermark after you move the cursor away.
I have tried a few different things without luck.
Live demo here:
http://www.it-stud.hiof.no/~benteh/tmp/
I have cut away everything else, so this is just the menu css & html.
(PS. there are only three levels on archeology, hominins and environmental)
You may be interested to know that removing the "visibilty: hidden" rule from the ".menu ul li ul" selector (on line 105 of the CSS) fixes the problem for me in Chrome. Checked in FF3.6 and it works too - didn't check it in anything else.