CSS Horizontal Menu problem in IE7

[lmorgan]

Hi everyone,

I contracted someone to create the CSS for a site I'm developing, and in the horizontal nav bar everything looks ok in IE 6.0, Mozilla and Opera, but not in IE 7.0, where the sub-menu items shift over. I'm not able to reach the developer as he's on vacation for 2 weeks

I've been Googling this problem for days, but since I know CSS only in a basic sense, I'm not sure what the problem is, where to look, or how to fix.

Would someone be so kind as to look at this site:

http://www.mainlinewestrealestate.com/hometest.html

and let me know what's causing the problem and how to fix?

I think, (but am not positive) this is the code that speaks to the top horizontal navigation:

div#top-nav {
background-color: #6D7E8E;
clear:left;
float: left;
height: 36px;
width: 100%;
color: #ffffff;
font-size: 1.1em;
font-weight: bold;
line-height: 36px;
text-align: center;
}
ul#top-menu {
margin: 0 auto;
padding: 0;
list-style: none;
height: 36px;
width: 650px;
}
 ul#top-menu li {
text-align: left;
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
}

ul#top-menu a {
color: #ffffff;
text-decoration: none;
}
ul#top-menu li ul.submenu {
background-color: #6d7e8e;
display: none;
position: absolute;
top: 36px;
left: 0;
padding: 0;
margin: 0;
line-height: 1.1em;
width: 100%;
}
* html ul#top-menu li ul.submenu {
  width: auto;
}
ul#top-menu li ul.submenu li {
margin: 3px 4px;
}
* html ul#top-menu li ul.submenu li{
  float: none;
  }
ul a {
color: #ffffff;
}
ul#top-menu li:hover ul.submenu, ul#top-menu li.over ul.submenu  {
display: block;
}

I appreciate any help so much.

Lisa

 

[Vragabond]

ul#top-menu li ul.submenu li {
  margin: 3px 4px;
}
* html ul#top-menu li ul.submenu li{
  float: none;
}

Here you're giving the instruction to IE6 (and other older IE browsers) to not float the list items in the submenu (because they should not be floated). You're using a hack to deliver that information only to IE6 and older, which makes no sense, since not floating the list items in the submenu in any browser should cause problems. So I suggest you join those two instructions into one:

ul#top-menu li ul.submenu li {
  margin: 3px 4px;
  float: none;
}

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[lmorgan]

Thank you Vragabond for your suggestion. I'm not sure why they coded it that way, but your advice makes good sense. I will make the change and hopefully that will fix the problem in IE 7.0.

Thank you again!
Lisa