Menu is not staying centered

[wolfkin]

or to be more accurate i should say I never got it centered. I can't figure out why.

here's the code for the menu

 

and here's a portion of the CSS

    /* --- Main Menu - ala suckerish --- */
   #menu {
   background-color: #BA83A2;
   width:902px; /*-two more than the wrapper-*/
   text-align:center;
   }
   #menu ul {
   list-style: none;
   }
   #menu li {
   float: left;
   }
   #menu a {
   display: block;
   width: 5em;
   }

       /* child menu */
       #menu li ul {
       position: absolute;
       width: 5em;
       top: -999em;
       left: -999em;
       }        
       #menu li:hover ul, #menu li.hover ul {
       top: auto;
       left: auto;
       }

   /* --- Footer Menu --- */
   #footer ul {
   }
   #footer li {
   }
   #footer li a {
   }
   #footer li a:active, #footer li a:focus, #footer li a:hover {
   }

is there any reason I'm missing why my menu looks like this:

 

It's not live so I can't give a link but it's small so I can upload it to sendspace if you think it might be something in the entire CSS file.

Home
About Me
Books

Book 1
Book 2


Contact

Edited June 18, 2009 by wolfkin

[jlhaslip]

First of all, centre the wrapper div using margin: 0pt auto; width: 900px;

Then visit cssplay.co.uk to find a centering float left horiz ul/li menu.

 

http://www.cssplay.co.uk/menus/centered.html

Edited June 18, 2009 by jlhaslip

[wolfkin]

oh it's floating.. i don't know how i missed that.. that explains why the backgrounds aren't showing up correctly either. I may have to rewrite this entire menu. least i know where to look now thanks.