1 reply [Last post]
alexmel7
Offline
Regular
Last seen: 10 years 50 weeks ago
Timezone: GMT-4
Joined: 2008-05-23
Posts: 12
Points: 0

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

    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
      tags while keeping each nav item wrapped in
    • 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="#">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">GRANTS</a></li>
        <li><a href="#">COLLABORATION</a></li>
        <li><a href="#">STAFF</a></li>
        <li><a href="#">EVENTS</a></li>
        <li><a href="#">PEOPLE</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#"><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;
}

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 21 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Can you please post ALL of

Can you please post ALL of your HTML?

From the doctype to the

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph