CSS Menu not rendering correctly


Merry Christmas to everybody.

I’m trying to learn how to do a menu with css and I’m having problems trying to align the menu correctly. I created an ul but some how it has an offset to its left that’s making th menu shift to the right. I’m looking at the code but, can’t figure out why. Also, the page test renders ok with chrome and firefox but is totally a mess in ie8.

Here’s a look at the code:

  body{ margin:0; background: #ffffff url( './images/bg.jpg' ) repeat-x left top; }
  .header{ width:960px; margin:0 auto; height: 201px;}
  .headerInner{ margin:11px auto 0px auto; height:190px; }

  .logo{ margin:0; background: #ffffff url( './images/iclogo.jpg' ) repeat-x left top;  width: 312px; height:140px; }
  #nav { width: 960px;	height: 40px;	margin: 10px auto 0px auto; border: solid 1px #224003;}
  #nav ul {	width: 960px;	height: 40px;	list-style: none; }
  #nav li {	height: 40px;	float: left; }
  #nav li a {	width: 190px;	height: 39px;	line-height: 39px;	background: #959695;	color: #171817;
              border-top: solid 1px #787a78; border-right: solid 1px #bdbebd;	border-left: solid 1px #787a78;
              display: block;	text-align: center;	text-decoration: none; }
  #nav li a:hover {	text-decoration: underline; }
  #nav li a.active {	height: 40px;	background: #568c00;	color: #fff;	border: solid 1px #224003;	border-bottom: none;}
  .clear {	clear: left; }
  .main{  }
  <div class="header">
  <div class="headerInner">
    <div class="logo"></div>
    <div id="nav">
      <li><a class="active" href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Case Studies</a></li>
      <li><a href="#">Contact Us</a></li>

I added a border to nav to show the offset.

Here’s a link to it: http://www.optimumwireless.com/test

Thanks in advanced for your help and assistance.

Hi landysaccount, welcome to SitePoint! :slight_smile:

Each browser has default styling for various elements, so you need to be careful to eliminate these if you don’t want them. Here you need:

ul {margin:0; padding:0;}

This is why a lot of people use what’s called a CSS reset, so they don’t have to remember to do this for every element.

EDIT: PS, your link didn’t work.

Thanks ralph.m.

Fixed by adding:

padding: 0; border: 0; outline: 0; vertical-align: baseline;

to ul and li.

Link works now.