CSS - Reset Css - Dumb Question

First of all, this is my first post, so take it easy on me if I do something wrong

Onto the problem...

I'm trying to center my CSS navigation menu. I'm probably making a completely moronic mistake, but I've been trying to figure this out for quite some time now to no avail. I've managed to ALMOST do it, but there's something wrong, and it's probably something minor.

(Please excuse the sloppy coding; I'm just beginning to design the layout)

HTML:
Code:

  <div id="navigation">
       <ul id="navigation">
           <li><a href="page1.html" target="_self" title="Home" class="current">Home</a></li>
           <li><a href="about.html" target="_self" title="About">About</a></li>
           <li><a href="solutions/solutions.html" target="_self" title="Solutions">Solutions</a></li>
           <li><a href="clients/clients.html" target="_self" title="Clients">Clients</a></li>
           <li><a href="faq/faq.html" target="_self" title="FAQ">FAQ</a></li>
           <li><a href="contact/contact.html" target="_self" title="Contact">Contact</a></li>
    </ul></div>
  <!-- end #navigation -->

CSS:
Code:

}
.twoColLiqRtHdr #navigation { 
	height: 37px; 
	background: #FFF url("images/menu-bg-yellow-orig.gif") repeat-x; 
	font-size: .9em; 
	font-family: "Lucida Grande", Verdana, sans-serif; 
	font-weight: bold;  
	margin-left: 0; 
	padding: 0;
}
#navigation ul, #navigation ul li {
     list-style: none;
     margin: 0;
     padding: 0;
 }
.twoColLiqRtHdr #navigation ul {
	height: 37px; 
	margin: 0; 
	padding: 0;
	text-align: center;
} 
.twoColLigRtHdr #navigation ul li {
	display: inline-block;
}
.twoColLiqRtHdr #navigation ul li a {
	color: #777;  
	text-decoration: none;
	padding: 2px 10px 0px;
	height: 37px;
	line-height: 200%;
	margin: 0;
	display: inline-block;
}
.twoColLiqRtHdr #navigation ul li a:hover { 
	color: #333; 
}
.twoColLiqRtHdr #navigation ul li a.current { 
	color: #CC0A00;
	background: #FFF url("images/current-bg-yellow.gif") repeat-x; 
	padding: 2px 10px 0px; 
	display: inline-block;
}
/*\*//*/
#navigation ul li a {
	display: inline-block;
	white-space: nowrap;
	width: 1px;
}

#navigation ul {
	padding-bottom: 0;
	margin-bottom: -1px;
}
/**/

/*\*/
html #navigation ul li a {
	padding: 0;
}
/**/

This is the result of my current coding:

http://i75.photobucket.com/albums/i320/blockbusted/cssmenuproblem.jpg

If anyone can shed some light on this problem of mine, I would greatly appreciate it! THANKS!

(P.S. I know the CSS doesn't validate; I just validated it and I'm still having the same problem.)

Hi there,
I have reached the end of my ability to figure out fixes for my problem. I can see it must be something obvious that is creating my inconsistency across browsers, but I can't seem to figure it out.
In IE all the items appear correctly but it is pushed over really far to the right and creates a scroll bar. It appears as I would like in Firefox.
I would really appreciate some suggestions so I can get my cross-browser learning further along!
my site: http://www.kohlrbaby.com/vcc/portfolio/portfolio.htm
my css:
body {
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #000000;
background-color: #999999;
text-align: center;

}
a {
text-decoration: none;
color: #43709e;
outline: none;
font-size: 12px;

}
a:visited {
color: #990000;

}
a:active {
color: #43709e;

}
a:hover {
color: #e7d77e;
text-decoration: underline;

}
a.nav {
text-decoration: none;
color: #000000;
outline: none;
font-size: 12px;
}
a.nav:visited {
color: #0000000;
}
a.nav:active {
color: #000000;
}
a.nav:hover {
color: #990000;
text-decoration: underline;

}
p {
font-size: 12px;
line-height: 22px;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
text-align: left;

}
.navText{
text-align: left;
voice-family: "\"}\"";
voice-family:inherit;
width: 93px;

}
#title{
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left:0px;
position: absolute;

}
#navBox{
background-color: #CCCCCC;
border-right: 1px dashed #000000;
border-top: 1px dashed #000000;
border-bottom: 1px dashed #000000;
border-left: 1px dashed #000000;
margin-top: -380px;
margin-bottom: 0px;
margin-right: 5px;
margin-left:0px;
position: relative;
float: right;
clear: right;
padding: 10px 10px 10px 10px

}
#rightBox {
border-right: 2px solid #666666;
width:650px;
height: 510px;
border-top: 2px solid #666666;
border-bottom: 2px solid #666666;
border-left: 2px solid #666666;
margin-top:60px;
margin-bottom: 0px;
margin-right: 0px;
margin-left:200px;
background: #ffffff;
position: absolute;

}
#subTitle{
margin-top: 5px;
margin-bottom: 0px;
margin-right: 0px;
margin-left:5px;
float: left;
clear: left;
position: relative;

}
#drawing{
margin-top:0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left:0px;
position: relative;

}
.mainPic {
margin-top: 117px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 150px;
position:absolute;
float: left;
clear: left;

}
#smallPic {
margin-top: -455px;
margin-bottom: 0px;
margin-right:-150px;
margin-left: 0px;
position:relative;

}
img.pic{
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;

}


Many, many thanks!!!

Unfortunately I am going to have to get more involved in CSS rather than happily concentrating on PHP development. We have realised that getting our designers to CSS stuff is just costing us time as they lack the experience and don't understand the semantics.

Anyway, as such I need to find out a few things I know but don't know if you know what I mean.

Where can I find out the official definitions of CSS operators...

* html for example..what the * does.

class1>class2...what the > does...stuff like that.

I have two CSS reset files.

One by: Erik Meyer

The other by: Yahoo! Inc. All rights reserved. Code licensed under the BSD License

Which is better?

I tried to put links to them, but the forum is prohibiting me, so if anyone is familiar, then advise.

Hi all

Is there a way to set a value, that has been overridden by a specific value before, to the browser's default value again?

Code:

div.specific {
  font-size: 10px;
}

div.specific div.browser_default {
  font-size: default;
}

Is there anything like that?

Thanks for help,
Josh