Need CSS Guru set of eyes for IE7 issue

[devel95]

I have a CSS drop down menu (with a small footprint of javascript to accommodate IE 7 and below). This menu works absolutely perfectly, as designed, in every browser except IE7. It's the suckerfish menu.

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 properly while hovering (onMouseOver) but end up sliding up into the top level 1 menu bar (onMouseOut).

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

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

Thanks.

[letmehaveago]

Use the following styles will work:

/*  M E N U   B A R   S T Y L E S   v3.0 :) */
#menu {
  background-color: #ddb813;
  clear: both;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  height: 26px;
  position: relative;
}

#menu ul {
  background-color: #ddb813;
  list-style: none;
  margin: 0 auto;
  padding: 5px 2px 5px 2px;
  width: 894px;
}

#menu li {
  float: left;
  margin: 0;
  margin-right: 4px;
}

#menu li ul {
  background-color: #ddb813;
  display: none;
  left: 0;
  position: absolute;
}

#menu a {
  display: block;
  margin: 0 0 0 0;
  position: relative;
}

#menu a:link, #menu a:visited {
  background-color: #ebd471;
  color: #333;
  padding: 1px 12px 1px 12px;
  text-decoration: none;
}

#menu a:hover, #menu a:active {
  background-color: #7391dc;
  color: #fff;
  padding: 1px 12px 1px 12px;
  text-decoration: none;
}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.iehover ul, #menu li li.iehover ul, #menu li li li.iehover ul {
  display: block;
}

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.iehover ul ul, #menu li.iehover ul ul ul {
  display: none;
}

#menu li.iehover ul {
  display: block;
}

#clear_menus {
  clear: both;
}

Basically:
1. left: -999em with display: none; and left: 0;
2. left: auto with display: block; and left: 0
3. added position: relative on #menu so submenu is shown correctly
4. instead of declaring width multiple times just declare once.
5. floated li and convert a to block

I don't have time to look for more improvements.

[devel95]

Hey "letmehaveago" !!

You did what no one else on StackOverflow or Web Developer Forum could do -- you solved my IE7 issue. You're awesome and I thank you so very much.

Quick question just from a "best practices" standpoint. Is there any rationale behind why you re-ordered my styles the way you did? I have always wondered what the best stacking order is within the curlies...{}

Thanks again for helping me out.

[letmehaveago]

Actually it was random!

Most of the time it shouldn't affect your layout but obviously one way is to just go in alphabetical order.

Thanks for the praise. I am sure other people could but you would probably need to pay them

[devel95]

letmehavago,

I have another issue to solve with my css.

If you logon to http://wheatfield.ny.us/ you will see a utility menu in the upper right corner side of the page with links "Site Search | Contact Us"

Then if you logon to http://test.wheatfield.ny.us/ you will see the same links but in a styled fashion identical to the look and behavior of my menu navigation bar.

I need to shorten the width of the utility menu block to result in a uniform border around the 2 list items (about 210-215 pixels in width) and I want it to sit on top of the header image and all the way to the right just as the "unstyled" links do in http://wheatfield.ny.us/

Do you have time to look and send me suggested css modifications?

Thank you "letmehavago" or any other contributors.

P.S. I do not consider this an IE7 issue/request, merely a need for help with my css styling.

[letmehaveago]

I am not too sure of your requirements. From what I could see it looks like the list items are too far apart. If that is the issue I would suggest:

#header_contentBlock li { float: right }
#header_contentBlock li a { display: block }

In ie7 the top and bottom borders will be missing for no apparent reason but if you display: block it, it will reappear. When it does the positioning will be a little off so change the padding to 50px and should be consistent between ie8 and ie7.

In retrospective, I suggest you place the new menu as the first child of #pageWrapper and use negative margins to shift it above the header image. Also you have created duplicate styles when it would have been better to change your style names. i.e. #menu to .menu.

[devel95]

Thanks "letmehaveago". My issue was the gap between the list items and your css corrected. much appreciated.

[devel95]

I have one minor issue remaining with my navigational menu -- then it is finished.

If you look at http://wheatfield.ny.us/ the search box has a background image representing the submit button. I filled my css with a lot styles trying to format the search box (some styles my be overkill). I tested it in all current browsers (FF, Safari, Google, Opera, Lunascape 6, IE 7 and IE8). It renders consistently in each.

The only thing I can't seem to correct is bumping the background image up 1 pixel to get it to position inside the search box more cleanly.

Any ideas or recommendations?

Thanks.