Please help centering a CSS/JS menu

This should be easy, but I can't figure it out.

[sabrosa]

I've been at it for hours and can't get this menu to center properly. I got it pretty close but it still appears a little too far to the left. If anybody has a solution I would be very grateful.

-----------------
HTML AS FOLLOWS
-----------------

<div id="menu-wrapper">
<div id="menu">
<ul id="menuList">
<li><a class="submenu" name="submenu" href="#">Company</a>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Press Releases</a></li>
</ul>
</li>
<li><a class="submenu" name="submenu" href="#">Products</a>
<ul>
<li><a href="#">Retail</a></li>
<li><a href="#">Commercial</a></li>
<li><a href="#">List All</a></li>
</ul>
</li>
<li><a class="submenu" name="submenu" href="#">Services</a>
<ul>
<li><a href="#">Consulting</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Testing</a></li>
</ul>
</li>
<li><a class="submenu" name="submenu" href="#">Support</a>
<ul>
<li><a href="#">Education</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">News</a></li>
</ul>
</li>
</ul>
</div></div>

----------------
CSS AS FOLLOWS
----------------
#menu-wrapper {position: relative;
left: 50%;
margin-left: -25%;
font-size: 11px; }

#menu {line-height:17px; }

/* Again, "be nice to Opera 5". */

#menu ul {margin: 0;
padding: 0;
list-style: none; }

#menu li {/* all list items */
float: left;
position: relative;
width: 8em; }

#menu li ul {/* second-level lists */
position: absolute;
display: block;
top: 2em;
left: 0; }

#menu li>ul {/* to override top and left in browsers other than IE */
top: auto;
left: auto; }

/* Fix IE. Hide from IE Mac \*/

* html #menu ul li {float: left;
height: 1%; }

* html #menu ul li a {height: 1%; }

/* End */

#menu li:hover ul {display: block; }

#menu li:hover>ul {visibility:visible; }

#menu ul ul {visibility:hidden; }

/* Make-up syles */

#menu ul, li {margin: 0 0 0 0; }

/* Styles for Menu Items */

#menu ul a {display: block;
text-decoration: none;
color: #777;
background: #fff;
/* IE6 Bug */
padding: 5px;
border: 1px solid #ccc; }

/* Hover Styles */

#menu ul a:hover {color: #E2144A;
background: #f9f9f9; }

/* Sub Menu Styles */

#menu li ul a {text-decoration: none;
color: #77F;
background: #fff;
/* IE6 Bug */
border: 1px solid #ccc;
padding: 5px; }

/* Sub Menu Hover Styles */

#menu li ul a:hover {color: #E2144A;
background: #f9f9f9; }

/* Icon Styles */

#menu li a.submenu {background:#fff url("images/v_arrow.gif") no-repeat right; }

#menu li a.submenu:hover {background:#f9f9f9 url("images/v_arrow.gif") no-repeat right; }

#menu li ul a.submenu {background:#fff url("images/r_arrow.gif") no-repeat right; }

#menu li ul a.submenu:hover {background:#f9f9f9 url("images/r_arrow.gif") no-repeat right; }

[le_gber]

Hi sabrosa,

Just an idea but how about using

#menu-wrapper {
margin: 0 auto 0 auto;
font-size: 11px;
}

instead of

#menu-wrapper {position: relative;
left: 50%;
margin-left: -25%;
font-size: 11px; }

That's how I usually centre container/wrapper divs in the middle of the page.

Hope this helps,

Leo

[sabrosa]

Leo,

Thanks for the tip. I gave it a try and the menu is still pinned against the left side of the page. This is frustrating :-/

[createErrorMsg]

#menu-wrapper {
margin: 0 auto 0 auto;
font-size: 11px;
}

Auto margin centering only works if the element has an explicit width (otherwise, there's nothing to base the auto value off of).

cEM