css menu should be centered

[paulc201]

I have tried so many things but nothing has worked. All I want is the menu to stay centered on the page but it stays too far to the left. The css:

/* CSS Document
Title: Jennifer Liu-Cooper Consultant screen style
Author: Coopergraphix
*/

/* general---------------------------------------------------------- */
body {
background-color: #ffffff;
margin: 0;
padding: 0;
font-family: "Gill Sans", Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
text-align: center;
color: #4f2900;
}

H2 {
text-align: center
}

/* classes---------------------------------------------------------- */
#background {
background-repeat: no-repeat;
background-position: center top;
position: relative;
visibility: visible;
}
.centerpic {
display:block;
margin-left: auto;
margin-right: auto;
position: relative;
top: 0px;
height: auto;
width: auto;
visibility: visible;
}
.ctrtxt {
font-family: "Gill Sans", Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
color: #000000;
visibility: visible;
margin: 0 auto;
width: 500px;
height: auto;
letter-spacing: normal;
line-height: 120%;
word-spacing: normal;
font-size: 12pt;
}

/* page structure---------------------------------------------------------- */
#logo {
display: block;
background: url(../images/jlc_final_logo_150.png) no-repeat center;
margin:auto;
padding-top: 60px;
top: 150px;
height: 150px;
width: 150px;
visibility: visible;
}
#logo a {
display: block;
width: 100%;
height: 100%;
text-indent: -9999px;
}

#signature {
font-family: "Gill Sans", Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
color: #000000;
padding-left: 220px;
line-height: 150%;
text-align: left;
}

.insideLogo {
display:block;
margin:0 auto;
text-indent:-9999px;
}

#inside {
width: 550px;
margin: 0 auto 0 auto;
padding-top: 10px;
font-size: 100%;
line-height: 100%;
text-align: justify;
}

#inside2 {
font-family: "Gill Sans", Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
color: #000000;
width: 550px;
margin: 0 auto;
padding-top: 0px;
padding-left: 400px;
font-size: 100%;
line-height: 80%;
text-align: left;

}

#inside3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
color: #000000;
width: 750px;
margin: 0 auto 0 auto;
padding-top: 10px;
font-size: 10pt;
text-align: left;
letter-spacing: normal;
line-height: 100%;
font-weight: lighter;
}

/* Menu---------------------------------------------------------- */
#menu {
background: url(../images/main-bg.gif) repeat-x top left;
height: 88px;
width: 100%;

position: absolute;
top: 580px;
text-align: center;
left: 0px;
}
#menu ul {
width: 950px;
margin: 0 auto 0 auto;
}
#menu ul li {
list-style-type: none;
padding:0;
float: left;
}
#menu li a {
outline: none;
}
#menu li#menuIntroduction {
width: 157px;
height: 88px;
background: url(../images/menu-introduction.gif) 0px 0px no-repeat;
}
#menu li#menuIntroduction a {
display: block;
width: 157px;
height: 88px;
text-indent: -9999em;
text-decoration: none;
}
#menu li#menuIntroduction a:hover {
background: url(../images/menu-introduction.gif) 0px -88px no-repeat;
}
#menu li#menuConsulting {
width: 213px;
height: 88px;
background: url(../images/menu-consultingServices.gif) 0px 0px no-repeat;
}
#menu li#menuConsulting a {
display: block;
width: 213px;
height: 88px;
text-indent: -9999em;
text-decoration: none;
}
#menu li#menuConsulting a:hover {
background: url(../images/menu-consultingServices.gif) 0px -88px no-repeat;
}
#menu li#menuBlog {
width: 113px;
height: 88px;
background: url(../images/menu-blog2.gif) 0px 0px no-repeat;
}
#menu li#menuBlog a {
display: block;
width: 113px;
height: 88px;
text-indent: -9999em;
text-decoration: none;
}
#menu li#menuBlog a:hover {
background: url(../images/menu-blog2.gif) 0px -88px no-repeat;
}
#menu li#menuJennifer {
width: 186px;
height: 88px;
background: url(../images/menu-JenniferCooper.gif) 0px 0px no-repeat;
}
#menu li#menuJennifer a {
display: block;
width: 186px;
height: 88px;
text-indent: -9999em;
text-decoration: none;
}
#menu li#menuJennifer a:hover {
background: url(../images/menu-JenniferCooper.gif) 0px -88px no-repeat;
}
#menu li#menuContact {
width: 113px;
height: 88px;
background: url(../images/menu-contact.gif) 0px 0px no-repeat;
}
#menu li#menuContact a {
display: block;
width: 113px;
height: 88px;
text-indent: -9999em;
text-decoration: none;
}
#menu li#menuContact a:hover {
background: url(../images/menu-contact.gif) 0px -88px no-repeat;
}
And the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="phone" content="651-895-5028" />
<meta name="address" content="16520 N Hillcrest Ct." />
<meta name="city" content="Eden Prairie" />
<meta name="state" content="Minnesota" />
<meta name="country" content="United States" />
<meta name="zipcode" content="55346" />
<meta name="verify-v1" content="ztLQ/DunJDh6/l4nqlxn5rGDXSIagJyhFLOzJqlfgyI=" />
<title>jlc consultant</title>
<link rel="SHORTCUT ICON" href="../images/logo_32.ico" />
<link rel="stylesheet" href="http://jlcconsultant.com/paulcooper201/style3.css" type="text/css" media="screen" />

</head>
<body>
<h1 id="logo">
<a href="">jlc consultant</a>
</h1>

<div id="inside">
<p><p class="ctrtxt">Jennifer Liu-Cooper is a development operations consultant with over twenty years of experience in the field. Areas of specialty include business process re-design, knowledge/data management, gift/pledge processing, and system selection and implementation. Institutions served span the private and public sectors, including colleges and universities, hospitals, and non-profit organizations.

<div id="signature">
<p>Sincerely,</p>
<p>Jennifer Liu-Cooper</p>



<div id="menu">
<ul>
<li id="menuIntroduction"><a href="index.html">Introduction</a></li>
<li id="menuConsulting"><a href="consulting-services.htm">Consulting Services</a></li>
<li id="menuJennifer"><a href="Jennifer-Cooper.htm">Jennifer Cooper</a></li>
<li id="menuBlog"><a href="//jlcconsultant.com/blog">Blog</a></li>
<li id="menuContact"><a href="contact.htm">Contact</a></li>
</ul>

</div>

</div>
</body>
</html>
Any help would be greatly appreciated!

[X96 Web Design]

It's because you have float: left; in there. It makes it float left.

If you take the float:left out, it'll work - BUT, there'll be a space between <LI>'s.

Cheers,
X96

[davelf]

you should work with the padding-left or left
like this one, for example:


.menu li {
left:auto;
top:auto;
left:10px;
position: absolute;
display: none;
}


good luck:)

[paulc201]

Thanks so much! I'll try these out and post my results later today.