Need CSS Guru set of eyes for IE7 issue

Question

I have a CSS drop down menu (with a small footprint of javascript to accommodate IE). This menu works absolutely perfectly, as designed, in every browser except (you guessed it) IE7.

What is perplexing and frustrating to me is that when I switch my IE8 browser to mode-IE7 in the developers tools of IE I cannot create this issue. The menu functions just fine. Yet when my client, who has a pure install of IE7, uses the menu bar on any page, it does not function as designed.

Here's the apparent issue:

• when he clicks on certain top level menu items and then begins hovering over menu items to reveal the drop down level menu, the level 2 items display within the same horizontal line as the top level menu and slightly behind the top level menu.

Here's the website: http://wheatfield.ny.us/

If anyone has a fix for this anomaly in IE7 I would greatly appreciate it.

Thanks.

Answer 1

What actually happens is that the menu displays correctly, but does not hide back again correctly - stays on top. Also I would not suggest using expressions in css since it can trigger a series of undesiderated effects.

A good approach i would suggest is using Suckerfish technique to create dropdown menus. It also has a nice js solution for IE browsers so even IE will support hover.

You can check it out here: http://htmldog.com/articles/suckerfish/dropdowns/

If you still want to debug this exact issue you should probably add another expression for when mouse does not hover anymore. But i suggest taking a more solid approach as i mentioned.

Answer 2

This would probably help if you're using more advanced CSS selectors with IE7:

  <!--[if lte IE 7]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script> 
  <![endif]--> 

Answer 3

According to the suckerfish script I am using (ieHover.js),

here is the onMouseOver code:

elems[i].onmouseover=function() {
    this.className+=" iehover";
}

and here is the onMouseOut code:

elems[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}

Do you think the replace method is working properly? It's hard to troubleshoot because I cannot "view source" to see these attributes definitions because they get set on the fly -- onLoad().

Thanks.

Answer 4

"letmehaveago" was able to answer this question at http://webdeveloper.com/forum/showthread.php?t=235784 in case anyone needs a similar solution.