horizontal centering

I'm having trouble centering my navigation. The code is from maxdesign.com.
Here's my website, so that you can see what's going on: www.digitalfreelance.net

#navcontainer
{
padding: 0 0 2em 30px;
}

#navlist
{

position: relative;
width: 100%;
height: 2.30em;
margin: 0;
padding: 0;
border-bottom: 3px solid #f63;
white-space: nowrap;
}

#navlist li
{



float: left;
margin: 0 0 0 2px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #aaa #555 #f63 #999;
list-style-type: none;
}

#navlist li a
{
position: relative;
width: 7.75em;
display: block;
margin: 0;
padding: 1px 0.4em;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #ccc;
background-color: #eee;
color: #666;
font: normal 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
}

#navlist li a:hover
{
color: #00c;
text-decoration: underline;
}

#navlist li#active a
{
font-weight: bold;
background-color: #f63;
color: #fff;
border-color: #f96 #c30 #f63 #f96;
}

#navlist li#active a:hover { color: #fff; }

#navlist ul#subnavlist
{
position: absolute;
width: 100%;
left: 0;
top: 2.25em;
height: 0.75em;
margin: 0;
padding: 0;
border-bottom: 3px solid #f63;
white-space: nowrap;
}

#navlist ul#subnavlist li
{
width: 14ex;
margin: 0;
border: 0;
}

#navlist ul#subnavlist li a
{
width: auto;
padding: 0.06em 1em 0;
border: 0;
background-color: #fff;
color: #000;
font: normal normal 90% Verdana, Arial, sans-serif;
}

#navlist ul#subnavlist li a:hover
{
color: #00c;
text-decoration: underline;
font-weight: 400;
/* IE5/Mac disappearing item fix */
}

#navlist ul#subnavlist li#subactive a
{
background-color: #fc9;
color: #000;
}

* html > body #navlist, * html > body #navlist ul#subnavlist
{
width: 600px;
/* IE5/Mac fixed width fix */
}

Code (markup):

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://cdhames.smugmug.com/" id="current">Home</a>

<ul id="subnavlist">
<li id="subactive"><a href="http://cdhames.smugmug.com/gallery/1821744" id="subcurrent">Services</a></li>
<li><a href="http://cdhames.smugmug.com/gallery/1811336">About DF</a></li>
<li><a href="http://cdhames.smugmug.com/gallery/1818110">Guestbook</a></li>
<li><a href="http://cdhames.smugmug.com/gallery/1817817">Contact Us</a></li>
</ul>
</li>

<li><a href="#">Models</a>

</li>

<li><a href="#">People</a>

</li>

<li><a href="#">Places</a>

</li>

<li><a href="#">Things</a>

</li>

<li><a href="#">Events</a>

</li>

</ul>
</div>

Code (markup):

 

margin:0 auto; and an explicit width (preferably under 100%) will horizontally center an element. if you care about IE5, you'll need to do a text-align on the parent element and then re-set the text-align to left on the first child block element.

 

I've tried doing as you said. I added margin:0 auto; and a width below 100% to the parent container but there is no change. I also tried adding these changes to the first child container without effect. Do you have another suggestion?

 

See http://www.csscreator.com/node/22176#new

gary

 

Firstly you have an error in your CSS around line 242 in the .aboutWrapper element.

Also what exactly do you want. Your site navgation is already centered.

- Parag

 

thanks. yes, it was fixed late last night. the problem was with the width being set to 100%. But with it I have a different problem. Whenever you hover your mouse cursor over the sub-menu, it crashes IE. It works as advertised in Mozilla. This started happening slightly after i plugged the generic script in, and before I fixed the centering problem. Here is the latest css. Nothing else has changed:

#navcontainer
{

width: 650px;
}

#navlist
{

position: relative;
width: 650px;
height: 2.25em;
margin: 0 auto;
padding: 0;

border-bottom: 3px solid #333;
white-space: nowrap;
}

#navlist li
{



float: left;
margin: 0 0 0 0px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #aaa #555 #f63 #999;
list-style-type: none;
}

#navlist li a
{
position: relative;
width: 7.87em;
display: block;
margin: 0;
padding: 1px 0.4em;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #ccc;
background-color: #eee;
color: #333;
font: normal 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
}

#navlist li a:hover
{
color: #fff;
text-decoration: none;
background-color: #f63;
border-color: #f96 #c30 #f63 #f96;
}

#navlist li#active a
{
font-weight: bold;
background-color: #f63;
color: #fff;
border-color: #f96 #c30 #f63 #f96;
}

#navlist li#active a:hover
{ 
color: #fff; 
}

#navlist ul#subnavlist
{
position: absolute;
width: 100%;
left: 0;
top: 2.25em;
height: 0.75em;
margin: 0;
padding: 0;
border-bottom: 3px solid #333;
white-space: nowrap;
}

#navlist ul#subnavlist li
{
width: 14ex;
margin: 0;
border: 0;
}

#navlist ul#subnavlist li a
{
width: auto;
padding: 0.06em 1em 0;
border: 0;
background-color: #fff;
color: #000;
font: normal normal 90% Verdana, Arial, sans-serif;
}

#navlist ul#subnavlist li a:hover
{
color: #000;
text-decoration: none;
background-color: #fc9;
font-weight: 400;
/* IE5/Mac disappearing item fix */
}

#navlist ul#subnavlist li#subactive a
{
background-color: #fc9;
color: #000;
}

* html > body #navlist, * html > body #navlist ul#subnavlist
{
width: 600px;
/* IE5/Mac fixed width fix */
}

Code (markup):

 

The problem must be with your javascript.
I am not into javascript, so might not be able to help you in this.

I can only suggest this:
1] Restore everything back as it was.
2] Do a step by step edit and keep refreshing to see the results and maybe track the error step.

- Parag