2

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:

  1. Most Important: There are z-index issues with the top menu and the header content in IE7. The headings are above the dropdown.
  2. 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.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • If it helps, I've solved these types of problems multiple times: [see](http://stackoverflow.com/search?tab=newest&q=user%3a405015%20z-index), in particular these answers contain explanations (or links to them): [1](http://stackoverflow.com/questions/5615502/superfish-horizontal-nav-bar-not-getting-displayed-in-the-page/5615530#5615530), [2](http://stackoverflow.com/questions/5421813/why-is-my-css-drop-down-menu-opening-behind-a-div-in-ie7/5422364#5422364), [3](http://stackoverflow.com/questions/5154168/div-layering-problems/5154440#5154440). – thirtydot May 06 '11 at 11:29
  • Yeah that does help @thirtydot, I ended up with an awful temporary javascript fix for some other elements in IE7, I'll refer to those answers. I read a few essays on z-index but just couldn't get this one to work, I never usually have problems but I admit I just usually throw around random z-index values without knowing what I'm doing. Thank you. – Wesley Murch May 06 '11 at 11:31
  • And for an exhaustive and precise explanation that helped me to understand this problem in the first place: http://stackoverflow.com/questions/672228/ie-6-ie-7-z-index-problem/3998006#3998006 – thirtydot May 06 '11 at 11:32

1 Answers1

1

To #header and #nav add:

position:relative;

and 

z-index:10 //for #nav
z-index:0  //for #header
pmaruszczyk
  • 2,157
  • 2
  • 24
  • 49
  • That's it! I really spent all morning on this and you solved it in 5 minutes! I will do some more reading on z-index when I'm done with this project, it's been a mystery to me for too long. – Wesley Murch May 05 '11 at 16:44
  • For the second problem I suggest moving ".nav > li > ul" elements by 2px up with css. Also padding top in UL may cause some problems. – pmaruszczyk May 05 '11 at 16:50
  • The main thing I failed to understand was which elements to set the z-index on, I'm having a similar issue with the second nav and the content body but now I can figure it out myself (hopefully). The second problem can take a backseat, javascript is handling it on the live site. I'll give that a shot though. – Wesley Murch May 05 '11 at 17:00