I have added a drop down menu on link Recipes in the main navigation.
Test URL: http://jaspreetkaur.com/makebathsalts/
It's working fine in all browsers except IE7 (not tested in IE6)
Menu is going behind banner area in IE7, i think it's related to z-index bug of IE7. I found some details on following page, but not able to fix this.
IE7 Z-Index Layering Issues
You need this:
#navigation{position:relative;z-index:10;}
The fix is simple, you need to specify the z-index for the direct parent of the ul menu, in your case the li with class active like this:
li.active {
position:relative;
z-index:10;
}
Related
EDIT:
On the above site whenever I zoom out in firefox the main content div is displaced to the right. This issue only exists in firefox, not in internet explorer, opera or chrome. Could someone help me fix this?
EDIT 2:
I do NOT want the div to displace in firefox. Sorry about the first question, I was in a hurry but should be clear now :)
If you give float:left; to the .wrapper element and the ul.menu everything will be ok :)
The issue you are having is not with #content but rather with the class wrapper. If you remove the rule overflow:hidden from the class, the issue will go away. It looks like the wrapper class is also associated with your button bar.
I would suggest removing wrapper from the div which holds all of the page contents and instead use a rule which only has width="100%".
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
the problem is that in IE7, the dropdown under "Departamentos" its cut by the banner, and it seems to be pushed to the right...
This should be a very easy to fix but I have little experience with IE fixes... I try for some time but I need your help, can you check it out??
Link to the Website
Thanks
It's same in IE8 because your document is rendered in quirks mode. Move the comments before the doctype declaration after the declaration. Anything before the doctype will trigger quirks mode in IE.
After you do that give .nav-wrap a z-index higher than #mainData and the submenu will show in IE7. Then give your submenu ul a left:0; to position it right.
Can you check this page and let me know why the menu doesn't work on IE7? It shows up all the way on the right, almost out of view.
The page works okay in other browsers (including IE8 and IE9). Thanks.
Change postition:absolute; to position:relative; in your #top-nav css ID. That will fix the position for you. After that remove position:absolute; from #top-nav li p and it will display correct.
I suggest you to download Developer Tools for IE. It helps you alot with HTML/CSS related problems when using IE.
Because you have ul#top-nav set to display:none ?
If not that, try playing with position:absolute, you have there all over the place... IE may have issues concerning that.
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);