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
Related
I am pretty good with css, but can't figure out why my menu is being destroyed by IE7. Looks perfect in all other browsers I tested. First image link is correct. Second image link is how it looks in IE7.
http://www.asingularcreation.com/Forums/download/file.php?id=8368&mode=view/ie8+.jpg
http://www.asingularcreation.com/Forums/download/file.php?id=8367&mode=view/ie7.jpg
Here is the page: http://www.asingularcreation.com/calls-to-artists.php. Any help would be greatly appreciated.
You do not need to float (or clear) the menu container. It looks like it is causing IE7 to calculate the width incorrectly which forces the menu to flow down, underneath the sub-menu.
<div style="height:40px; line-height:40px; float:left; clear:both"><!--Main Menu --></div>
Removing the float and clear properties fixes the display in IE7 and also still works in Chrome and IE8 and IE9.
There is a lot of inline styles in the example page so I would also look at moving the CSS into an external file if possible.
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.
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
A site I am developing is giving me some serious issues in Internet Explorer 7/8. On certain pages, the navigation goes underneath text and images. I'm rather confused. I've tried adding a z-index of 1 to the content and a higher Z-index to the navigation, but it is to no avail.
The link to the site with the problem and respective CSS file:
http://exitbellaire.com/exit-air.php
The CSS file is /style.css.
I just fixed it. I removed a position:relative tag from a div and things started working again.
I think you might need to add the higher z-index attribute to the .sf-menu and other #navigation element CSS as well, in addition to the base navigation div.
Z-index doesn't have any effect on a normally-positioned element. Try adding "position: relative" to the items you've put a z-index on, one at a time, and see if there's any change. Older versions of IE have a bad habit of looking at parent z-indicies, so that while something might have a z-index of 10, if its parent has a z-index of 1, the 10 will not show up over other elements with lower z-indicies.
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);