We have been working on this for a few months with no luck. The nav bar will shift to the right in IE but there is no apparent issue in other browsers. It should line up with the content box and be the same width.
Navbar was originally dreamweaver made but has been modified multiple times.
We have already checked multiple websites and started from scratch a few times. We believe there is a part of the code that is altering the navbar to shift and we cannot locate it.
Below is the PHP and CSS code.
Code:
<?php
$server_root = '#';
$web_root = '#';
?>
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">
function getViewportHeight() {
if (typeof window.innerWidth != 'undefined')
return window.innerHeight
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
return document.documentElement.clientHeight
else
return document.getElementsByTagName('body')[0].clientHeight
}
function resize() {
var height = getViewportHeight() - 200;
document.getElementById("content").style.height = height + "px";
}
</script>
<title>Tau Beta Sigma Theta Chapter</title>
<link rel="Shortcut Icon" href="<?php echo $web_root; ?>/images/favicon.ico" />
<link href="<?php echo $web_root; ?>/assets/wtp.css" rel="stylesheet" type="text/css">
<link href="<?php echo $web_root; ?>/assets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id= "wrap">
<div class="spacer"></div>
<div class="spacer3"></div>
<!-- learn!!!! --->
<!--- nav bar FML --->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="<?php echo $web_root; ?>/index.php" class="MenuBarItemSubmenu">Home</a>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Members</a>
<ul>
<li><a href="<?php echo $web_root; ?>/members/actives2.php">Active Members</a></li>
<li><a href="<?php echo $web_root; ?>/members/alumni.php">Chapter Roster</a></li>
<li><a href="<?php echo $web_root; ?>/members/lifemembers.php">Life Members</a></li>
<li><a href="<?php echo $web_root; ?>/members/honorary.php">Honorary Members</a></li>
<li><a href="<?php echo $web_root; ?>/members/trees.php">Family Trees</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">About</a>
<ul>
<li><a href="<?php echo $web_root; ?>/history/1940s.php">1940s History</a> </li>
<li><a href="<?php echo $web_root; ?>/history/60s_80s.php">1960s-1980s History</a></li>
<li><a href="<?php echo $web_root; ?>/history/1990s.php">1990s History</a></li>
<li><a href="<?php echo $web_root; ?>/history/2000s.php">2000s History</a></li>
<li><a href="<?php echo $web_root; ?>/history/nationals.php">National History</a></li>
<li><a href="<?php echo $web_root; ?>/history/missionpurposes.php">Mission and Purposes</a></li>
<li><a href="<?php echo $web_root; ?>/history/8and5.php">8 and 5</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Media</a>
<ul>
<!--- <li><a href="#">Photos</a></li>--->
<li><a href="<?php echo $web_root; ?>/media/music.php">Music</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Committees</a>
<ul>
<li><a href="<?php echo $web_root; ?>/committees/service.php">Service</a></li>
<li><a href="<?php echo $web_root; ?>/committees/membership.php">Membership</a></li>
<li><a href="<?php echo $web_root; ?>/committees/fundraising.php">Fundraising</a></li>
<li><a href="<?php echo $web_root; ?>/committees/communications.php">Communications</a></li>
<li><a href="<?php echo $web_root; ?>/committees/ht.php">History & Traditions</a></li>
</ul>
</li>
<li><a href="<?php echo $web_root; ?>/links.php" class="MenuBarItemSubmenu">Contact/Links</a>
</li>
</ul>
<!--- end dreamweaver made code--->
<!--- correct and working --->
<div class="spacer"></div>
<div align="left"></div>
<!-- start "The Trunk"--->
<div class="contentbox">
<div style='float:left;width:15%'> <img src="#" width="94" height="408" border="0" align="left" </div>
<div style='float:left;width:85%'>
----------------
#wrap {
width:100%;
height:100%;
background-color:#000076;
}
body {
margin: 0px;
padding: 0px;
background-color:#000076;
display:inline;
}
.spacer {
height:40px;
}
.spacer2 {
height:120px;
}
.spacer3 {
height:20px;
}
.spacer4 {
width:50px;
}
.contentbox {
margin:0 auto;
width:890px;
background-color:#ffffff;
overflow:auto;
padding-top: 10px;
padding-left: 0px;
padding-right:10px;
padding-bottom:10px;
}
table {
vertical-align:top;
}
td {
vertical-align:top;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
color: #000000;
padding-top: 0px;
padding-left: 0px;
padding-right:50px;
padding-bottom:0px;
text-align:left;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight: bold;
color:#000000;
text-align:left;
}
html, body {
text-align: center;
}
img {
position:relative;
padding-left:10px;
padding-right:10px;
padding-top:10px;
background-repeat: no-repeat;
}
img2 {
position:relative;
padding-right:135px;
}
img3 {
position:relative;
padding-left:135px;
}
/*.box
{
width: 80px;
height: 35px;
}
html>body .box {
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
} */
p {
text-align: left;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
p2 {
text-align: left;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding-top: 5px;
}
.menuitem {
float:left;
width:100%;
height:30px;
line-height:30px;
background-color:#FFFFFF;
padding-right: 10px;
padding-top: 10px;
}
#ul.menubar {
width:100%;
height:10px;
}
#linkbar {
width:20%;
height:10px;
line-height:10px;
}
.linkitem {
/*float:center;*/
height:30px;
font-size:12px;
line-height:30px;
color:#FFFFFF;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
text-align: center;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
/*list-style-image: none;*/
color: #000000;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none; /*list-style-image: none;*/
}
a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#666666;
text-decoration: none;
/*list-style-image: none;*/
}
a:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#999999;
text-decoration: none;
/*list-style-image: none;*/
}
/* IE fixes*/
<!--[if IE]>
<style>
.item {
margin: 5px;
padding: 10px;
}
</style>
<!---[EndIf]table {
-->
<!--- nav bar ----)
<style type="text/css">
#navbar {
float:left;
text-align:center;
width:100%;
margin:0 center;
position:relative;
font-size:12px;
color:#ffffff;
align:
}
#navbar ul {
list-style-type:none;
margin:0;
padding:0;
width:150px;
display:inline;
z-index:1020;
}
#navbar a {
color:#555555;
display:block;
font:bold 11px/16px arial, helvetica, sans-serif;
margin:0;
padding:2px 3px;
text-decoration:none;
}
#navbar a:hover {
color:#555555;
}
#navbar li {
position:relative;
display:inline;
float:left;
width:150px;
}
#navbar ul ul {
position:absolute;
z-index:500;
}
#navbar ul ul ul {
left:100%;
top:0;
}
#navbar ul ul, div#navbar ul li:hover ul ul, div#navbar ul ul li:hover ul ul {
display:none;
}
div#navbar ul li:hover ul, div#navbar ul ul li:hover ul, div#navbar ul ul ul li:hover ul {
display:block;
}
Before you post, read our: 
