Please help with menu in IE

[dodgson]

Hi Guys and Gals. I hope that one of you may be able to help me out. I have tried everything to fix a menu that I’m currently working on. The menu looks as it should in Firefox and Safari on both the mac and PC, but in IE the menu floats off of the baseline. I’m kind of at a loss as to how to correct this issue. You can access the page at the following address http://markdodgson.com/testSites/oacfp/ . Below is my navigation CSS. Thanks for any light you can shed on this.

Nav CSS

* {
padding: 0;
}

*:-moz-any-link:focus {
-moz-outline-style: none ! important;
}

#navigation {
height: 60px;
width: 100%;
border-top-width: 3px;
border-bottom-width: 3px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #4A984B;
background-image: url(../images/navBG.jpg);
background-repeat: repeat-x;
position: relative;
}

ul#menu{
list-style:none;
margin-left: 20px;
}

ul#menu li{
display: inline;
}

ul#menu li a {
text-indent: -9999px;
display: block;
height: 40px;
float: left;
position: relative;
margin-right: 9px;
top: 7px;
}

ul#menu li a.home {
background: url(../images/_nav/homeMenu.jpg) no-repeat bottom center;
width: 145px;
}

ul#menu li a.about {
background: url(../images/_nav/aboutMenu.jpg) no-repeat bottom center;
width: 145px;
}

ul#menu li a.products {
background: url(../images/_nav/productsMenu.jpg) no-repeat bottom center;
width: 145px;
}

ul#menu li a.calendar {
background: url(../images/_nav/calendarMenu.jpg) no-repeat bottom center;
width: 145px;
}

ul#menu li a.membership {
background: url(../images/_nav/membershipMenu.jpg) no-repeat bottom center;
width: 145px;
}

ul#menu li a.contact {
background: url(../images/_nav/contactMenu.jpg) no-repeat bottom center;
width: 145px;
}

ul#menu li a.home:hover,
ul#menu li a.about:hover,
ul#menu li a.products:hover,
ul#menu li a.calendar:hover,
ul#menu li a.membership:hover,
ul#menu li a.contact:hover {
background-position: top center;
}

body#home ul#menu li a.home,
body#about ul#menu li a.about,
body#products ul#menu li a.products,
body#calendar ul#menu li a.calendar,
body#membership ul#menu li a.membership,
body#contact ul#menu li a.contact {
height: 55px;
position: relative;
top: -5px;
background-position: center top;
}

[dodgson]

Hi Rob, I can’t thank you enough for taking the time to look over the site that I’m working on. I will take your advice and give your suggestions a try. As for the {overflow: scroll} … I added that so that the page doesn’t jump when there is more content on one page than the other. I didn’t realize that this causes issues. Again…Thanks.

[dodgson]

Hey Rob, I don’t even know how to thank you. I’ll be sure to pay it forward to others on the forum. Thanks again for all of your help. This forum is truly unbelievable.

Take Care
Mark

[Author]

Posts