Losing hair -- everything I have read tells me to center a block level element use left and right margins set to "auto" but I have tried that every place I can think of and the horizontal menu inside the header of this page will not budge. Started with DW CS4 template for 1 Col Fixed Centered. E
The html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Frontier Markets Partners home page</title>
<meta name="description" content="Frontier Markets Partners" />
<meta name="keywords" content="emerging markets, Africa, " />
<link href="oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<div>
<ul class="menu">
<li class="first"><a href="#">HOME</a></li>
<li><a href="#">OVERVIEW</a></li>
<li><a href="#">OUR TEAM</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CAPABILITIES</a></li>
<li><a href="#">CASE STUDIES</a></li>
<li><a href="#">BLOG</a></li>
<li class="bordernone"><a href="#">CONTACT US</a></li>
</ul>
</div>
<!--end topmenu div -->
<!-- end #header --></div>
<div id="mainContent">
<img src="images/fmp_logo-840x600.gif" width="840" height="600" alt="Frontier Markets Partners logo" />
<!-- end #mainContent --></div>
<div id="footer">
<p>Frontier Markets Partners • 1914 Windham Lane, Silver Spring, MD 20902
• 202-596-8897<br />
<a href="../fmp-index4.html">www.FrontierMarketsPartners.com</a></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>The CSS
@charset "UTF-8";
/* CSS Style sheet for Frontier Markets Partners home page */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #b5a586;;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColFixCtrHdr #container {
width: 840px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #b5a586;;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
}
.oneColFixCtrHdr #header {
background: #b5a586;
top: 0;
height: 40px;
position: relative;
padding-top: 20px;
}
/* main navigation styles */
.menu {
margin-left: auto;
margin-right: auto;
}
#header ul{
padding: 0;
position: absolute;
bottom: 0;
list-style: none;
display: block;
background-image: url(images/menu_bg.gif);
background-repeat: repeat-x;
background-position: left top;
}
#header ul li {
float: left;
}
#header ul a {
padding: 0 1.15em;
font-size: 12px;
font-weight: bold;
line-height: 1.9em;
text-decoration: none;
color: #666;
float: left;
display: block;
background-image: url(images/separator.gif);
background-repeat: no-repeat;
background-position: left top;
}
#header ul a.first{
background: none;
background-image: none;
}
#header ul a:hover {
color: #fff;
}
/* end top navigation menu styles */
.oneColFixCtrHdr #mainContent {
padding: 0 0px;
background-color: #b5b586;
}
.oneColFixCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#b5a586;
}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
color: #fff;
font-size: 80%;
font-weight: bold;
text-align: center;
}
a {
color: #555;
}