Centering navigation UL LI DIV

Posted: Tue, 2008-07-22 03:59

Here is a picture

Here is the relevant code

CSS for navigation

/*———————- Blueslate nav ———————-*/
.blue #slatenav
{
	position: relative;
	display: block;
	height: 118px;
	font-size: 21px;
	font-weight: bold;
	background: transparent url(../images/blueslate_buttonOVER.png) repeat-x top;
	font-family: Garamond, "Engravers MT", Helvetica, Verdana;
	text-transform: uppercase;
}
.blue #slatenav UL
{
	margin: 0px 0px 0px 63px;
	padding: 0;
	list-style-type: none;
	width: auto;
}
.blue #slatenav UL LI
{
	display: block;
	float: left;
	margin: 0 auto;
}
.blue #slatenav UL LI A
{
	display: block;
	float: inherit;
	color: #D5F1FF;
	text-decoration: none;
	padding: 53px 30px 0 26px;
	height: 62px;
}
.blue #slatenav UL LI A:hover, .blue #slatenav UL LI A.current
{
	color: #FFF;
	background: transparent url(../images/blueslate_button.png) no-repeat top center;
}

CSS for navBandHome, NavBandInner, and NavBand

#navBandHome, #navBand
{
	text-align: center;
	margin: 0px 0;
	padding: 0;
}
#navBandHome
{
	height: 118px;
	background: url(../images/nav-tile.gif) repeat-x top left;
	margin: 0;
	padding: 0px 0 0;
}
#navBand
{
	height: 115px;
	background: url(../images/nav-tile.gif) repeat-x top left;
	margin: 0;
	padding: 0;
}
#navBandInner
{
	margin: 0 auto;
	padding: 0px 0 0;
}

HTML

<div id="navBandHome">
  <div id="navBandInner">
  
  <div class="blue">
	<div id="slatenav">
	<ul>
	<li><a href="" title="" class="current">Home</a></li>
	<li><a href="" title="">About Us</a></li>
	<li><a href="" title="">Services</a></li>
	<li><a href="" title="">Our Work</a></li>
	<li><a href="" title="">Contact Us</a></li>
	</ul>
	</div>
	</div>

  
  </div>

</div>

Any ideas on how I can get this centered so it centers no matter what size the browser is?