Centering menu issue.. go figure..

[strat76]

I have another silly issue.. I've searched and tried what I've found and still not fixing it.. the nav was on the left then i put text-align : center in and it shot over but way to far right.. please help .. here's the CSS

/* CSS Document */body {	margin: 0;	padding: 0;	background-color: #FFFFFF;	font: 80% Arial, Helvetica, sans-serif;	line-height: 130%;	text-align: center;}body, html {	width: 100%;	position: relative;	background-image:url(bg-patt.gif);}p {	position: relative;	margin-top: 0px;	text-align:left;}a {	text-decoration: none;	color: #FFFFFF;}a:hover {	text-decoration: underline;}/*  Containers----------------------------------- */#bodyCont {	width: 100%;	min-height: 100%;	margin: 0;	padding: 0;	background-position: top left;	background-repeat:repeat-x;	background-image:url(top.gif);}*html #bodyCont {	height: _100%;	min-height: _100%;}#headerCont {	width: 813px;	height: 278px;	display: block;	position: relative;	margin: 0 auto;	padding: 0;}#coreCont {	width: 813px;	margin: 0 auto;		padding: 0 0px;	position: relative;	background-image:url(tan.gif);	min-height: 450px;	height: _450;	font-size: 8pt;	color: #333333;}*html #coreCont {	left: -3px;	height: 450px;}.leftbox {	position: absolute;	margin: 0px 0px 0px 0px;	padding: 5px;	width: 287px;	height: 450px;	background-image:url(left-col.gif);	left: 0px;	text-align:left;}.centerbox {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 304px;width: 500px;height: 450px;text-align:justify;}#footerCont {	position: relative;	clear: both;	margin: 0;	padding: 0;	width: 100%;	height: 200px;	display: block;	background-color: #000000;	background-image:url(footer.gif);	background-position:top left;	background-repeat:repeat-x;}.clear { clear: both; }/* 		Header	--------------------------------------------------- */#header {	position: relative;	width: 813px;	height: 278px;	margin: 0 auto;	padding: 0;	background-color:#33CCFF;	background-image:url(images/head-bg.gif);}/* Menu --------------------------------------------------- */#nav{	position:absolute; top: 237px; 	margin:0 auto;	display:inline;	height:41px;	font-size:13px;	font-weight:bold;	font-family:Arial,Verdana,Helvitica,sans-serif;	text-align:center;	}#nav ul{	margin:0 auto;	padding:0;	list-style-type:none;	}#nav ul li{	display:inline;	float:left;	margin:0 auto;	background-repeat: no-repeat;	}#nav ul li a{	display:inline;	float:left;	font-color: white;	text-decoration:none;	padding:13px 0px 0 32px;	height:41px;	}#nav ul li a{	color: #FFFFFF;	background-image: url(images/nav-off.gif);;    background-repeat: no-repeat;	}#nav ul li a:visited{	color: #FFFFFF;	background: url(images/nav-off.gif);    background-repeat: no-repeat;	}#nav ul li a:hover{	color: #c0aa78;	background: url(images/NAV-hover.gif);    background-repeat: no-repeat; 	}#nav ul li a.current{	color: #c0aa78;	background: url(images/NAV-hover.gif);    background-repeat: no-repeat;

[dcole.ath.cx]

It would be easier to find the problem if you create the page online. Myself, along with a large group of web developers use Firefox's Firebug to correct CSS mistakes.If you don't want to post it online or would like to do it your self, I would recommend getting the Firebug plugin.I would guess that the problem would be with the div tag that makes up the nav, but I don't know how the html is set up and it's hard to track what is the parent of the section that uses #nav.If I was you I would wrap a div tag around the nav and have it create the black background and white top/bottom border. This new div would have a width of 100%. With nav I would set margins to the widths of your "white spaces". This would align the nav in the middle. I would the set the "ul" that makes up the nav list to have an auto margin to center the nav items.text-align: center will ONLY align TEXT, not HTML elements.

[Ingolme]

This might be the root of the problem:position:absolute; top: 237px; There most likely is a better way to position this than with absolute positioning.