Hey everyone, I’ve been having a problem with my layout that’s starting to annoy me so I thought I’d ask for help. I have a horizontal nav menu that’s wrapped in a set of <ul> tags. Everything with the nav menu is fine except that I’ve noticed that my nav menu seems to shift up or down 1px when switching between my homepage and any other page. This wouldn’t be a big problem except that the shift occurs differently between ie and ff. The problem seems to go away if I get rid of the <ul> tags while keeping each nav item wrapped in <li> tags, but obviously I cannot do this b/c it is improper code. I’ve posted my html and css for my menu below. Any suggestions?
HTML:
<div id="header">
<div id="logo"></div>
<div id="menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="aboutus.html">ABOUT US</a></li>
<li><a href="grants.html">GRANTS</a></li>
<li><a href="collaboration.html">COLLABORATION</a></li>
<li><a href="staff.html">STAFF</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="people.html">PEOPLE</a></li>
<li><a href="http://blogs.cornell.edu/nyswri/">BLOG</a></li>
<li><a href="wrifeed.xml"><img src="images/rss_icon.png" />SUBSCRIBE</a></li>
</ul>
</div>
</div>
CSS:
#header {
position: absolute;
background-image: url(images/headerbar.png);
top: 0px;
left: 0px;
width: 100%;
height: 35px;
min-width: 950px;
}
#logo {
position: relative;
top: 2px;
left: -458px;
background-image: url(images/logo2.jpg);
width: 36px;
height: 33px;
margin-right: auto;
margin-left: auto;
}
#menu {
position: relative;
margin-right: auto;
margin-left: auto;
width: 870px;
top: -25px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#menu li {
text-decoration: none;
display: inline;
margin-left: 30px;
}
#menu a:Link, a:Active, a:Visited {
position: relative;
top: -1px;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
font-size: 10px;
text-decoration: none;
color: #CCCCCC;
letter-spacing: 2px;
}
#menu a:Hover {
color: #5D95C1;
}
#menu a:Focus {
outline: none;
}
#menu a img {
vertical-align: middle;
}