Question

Working on fixing my navigation menu as i was having issues with google chrome users being unable to click the nav bar links on my website. The new solution fixed it however I now have a nav bar that is off-set from the layout on one page and not on another.

visit http://www.survivaloperations.net for main site view (lined up) and http://www.survivaloperations.net/forums/ for the forum view (offset left).

HTML for nav is:

<ul id="nav">
        <li><a id="home" href="./news" alt="Home"></a>
        <li><a id="members" href="./members"></a>
        <li><a id="forums" href="./forums/" alt="Forums"></a>
        <li><a id="about" href="./about"></a>
        <li><a id="guides" href="http://www.survivaloperations.net/forums/viewforum.php?f=10"></a>
        <li><a id="drawings" href="http://www.survivaloperations.net/forums/viewforum.php?f=6"></a>
        <li><a id="faq" href="./faq"></a>
        <li><a id="downloads" href="./downloads"></a>
        <li><a id="sponsors" href="./sponsors"></a>
        <li><a id="nav_break" href=''></a>
        <li><a id="apply" href="./forums/application.php"></a>
    </ul>

CSS for nav is:

 #nav {   margin:297px 0 0 -40px;   position:absolute; }

 #nav a {   display:block;
     height:35px; }

 #nav li  {   display:inline-block; }

 #home {
     background: url('http://survivaloperations.net/images/home.jpg') no-repeat bottom;   width:106px; }
 #home:hover {
     background: url('http://survivaloperations.net/images/home_up.jpg') no-repeat
 bottom; }

 #members {
     background: url('http://survivaloperations.net/images/members.jpg') no-repeat
 bottom;   width:96px; }
 #members:hover {
     background: url('http://survivaloperations.net/images/members_up.jpg') no-repeat
 bottom; }

 #forums {
     background: url('http://survivaloperations.net/images/forums.jpg') no-repeat bottom;   width:96px; }
 #forums:hover {
     background: url('http://survivaloperations.net/images/forums_up.jpg') no-repeat
 bottom; }

 #about {
     background: url('http://survivaloperations.net/images/about.jpg') no-repeat bottom;   width:96px; }
 #about:hover {
     background: url('http://survivaloperations.net/images/about_up.jpg') no-repeat
 bottom; }

 #guides {
     background: url('http://survivaloperations.net/images/guides.jpg') no-repeat bottom;   width:96px; }
 #guides:hover {
     background: url('http://survivaloperations.net/images/guides_up.jpg') no-repeat
 bottom; }

 #drawings {
     background: url('http://survivaloperations.net/images/drawings.jpg') no-repeat
 bottom;   width:96px; }
 #drawings:hover {
     background: url('http://survivaloperations.net/images/drawings_up.jpg') no-repeat
 bottom; }

 #faq {
     background: url('http://survivaloperations.net/images/faq.jpg') no-repeat bottom;   width:96px; }
 #faq:hover {
     background: url('http://survivaloperations.net/images/faq_up.jpg') no-repeat bottom; }

 #downloads {
     background: url('http://survivaloperations.net/images/downloads.jpg') no-repeat
 bottom;   width:96px; }
 #downloads:hover {
     background: url('http://survivaloperations.net/images/downloads_up.jpg') no-repeat
 bottom; }

 #sponsors {
     background: url('http://survivaloperations.net/images/sponsors.jpg') no-repeat
 bottom;   width:100px; }
 #sponsors:hover {
     background: url('http://survivaloperations.net/images/sponsors_up.jpg') no-repeat
 bottom; }

 #nav_break {   background:url('http://www.survivaloperations.net/images/nav_spacer.jpg');
     width:254px; }

 #apply {
     background: url('http://survivaloperations.net/images/apply.jpg') no-repeat bottom;   width:108px; }
 #apply:hover {
     background: url('http://survivaloperations.net/images/apply_up.jpg') no-repeat
 bottom; }

I do not see anything in the forum nor normal website stylesheets that would cause this.
if I change the -40px to 0 it messes the normal site up and fixes the forum.

Any ideas would be great!

NOTE: Entire CSS can be found at http://www.survivaloperations.net/style.css

Answer 1

First of all, your navigation breaks when the page is resized.

#nav {
    margin: 0 auto;
    position: relative;
    width: 100%;
}

EDIT

I noticed you have a padding issue too. SO I would add padding: 0; to that CSS as well.