After struggling with my navigation menu in Google Chrome, I finally found a solution. However, the nav bar is now offset on one page but not on another.
For the aligned main site view, visit , and for the left-offset forum view, visit .
This is the HTML code for the navigation:
<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>
This is the CSS code for the navigation:
#nav { margin:297px 0 0 -40px; position:absolute; }
#nav a { display:block; height:35px; }
#nav li { display:inline-block; }
/* Each button styling begins here */
#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; }
/* Additional buttons follow the same format as above */
I have checked the forum and website stylesheets but couldn't find anything that would cause this. Changing the margin value fixes the forum but messes up the normal site. Any suggestions?
For the complete CSS file, visit