Website in final stages of development, looks fine in all browser but IE. To view what it looks like we have a staging link - http://boyscoutskeepingthepromise.com/stage/bsa/index.html.
The problem is the navigation in IE shifts right and starts in the middle.
here is the html for the navigation:
The CSS:
Thanks.
The problem is the navigation in IE shifts right and starts in the middle.
here is the html for the navigation:
PHP:
<div id="navigation">
<div id="nav-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="html/aboutus.html">About Us</a></li>
<li><a href="html/boyscout.html">Boy Scout Camp</a></li>
<li><a href="html/cubscout_webelos.html">Cub Scout Camp</a></li>
<li><a href="html/fg_hoover.html">Hoover Service Center</a></li>
<li><a href="html/venturing.html">Venturing Complex</a></li>
<li><a href="html/ways_to_give.html">Ways to Give</a></li>
<li><a href="html/chairmans_circle.html">Chairman's Circle</a></li>
<li><a href="html/contact.html">Contact Us</a></li>
</ul>
</div>
</div>
The CSS:
Code:
#navigation {
position: absolute;
top: 196px;
left: 0px;
width: 943px;
height: 48px;
background-color: #ffffff;
}
#nav-menu {
padding: 0;
margin: 0;
position: absolute;
width: 943px;
height: 48px;
z-index: +3;
}
#nav-menu ul {
padding: 0;
margin: 0;
top: 186px;
left: 0px;
list-style: none;
}
#nav-menu li {
float: left;
margin: 0 0px;
}
#nav-menu li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 125%;
float: left;
width: 103px;
display: block;
text-decoration: none;
text-align: center;
}
this sits in a container with this CSS:
#container {
position:relative;
width: 943px;
height: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Thanks.
Last edited by a moderator: