I’m trying to tidy up this site, and these little things keep getting in my way…This is a new problem in my centering CSS. I got the page to center, but now the drop-down menus are way off. I’m not sure where the problem is on this one. Although the pages are now centered, in Firefox and Chrome, the drop menus are appearing waaay off to the side of where they should be. Here’s the CSS:
- {
margin: 0;
padding: 0;
}
html, body, #wrap {height: 100%;}
#wrap {min-height: 100%;}
#main {
overflow: auto;
padding-bottom: 93px;}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto; -4em;
}
#container {
position: relative;
width: 1003px;
text-align: left;
margin: 0;
}
body {
background: #ffffff;
font-family: "Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
margin: 0 auto;
padding: 0;
text-align: center;
width: 1003px;
}
h1, h2, h3 {
color: #292929;
}
h1 {
letter-spacing: -1px;
font-size: 30px;
}
h2 {
font-size: 24px;
color: #292929;
}
h3 {
font-size: 13px;
color: #292929;
}
p, ul, ol {
margin-bottom: 2em;
text-align: justify;
line-height: 200%;
}
p {
}
ul {
}
ol {
}
a {
color: #0000ff;
}
a:hover {
text-decoration: none;
color: #0000ff;
}
img {
border: none;
}
img.left {
}
img.right {
}
.tn img {
border: 8px solid #F5F5F5;
}
hr {
display: none;
}
/* Logo */
#logo {
width: 1003px;
height: 151px;
margin: 0;
}
#logo h1 {
float: left;
width: 1003px;
height: 151px;
background: url(images/header01.jpg) no-repeat;
padding: 75px 0 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
font-weight: bold;
}
#logo h2 {
float: left;
padding: 98px 0 0 0;
font-weight: normal;
font-size: 16px;
color: #FFFFFF;
}
#logo a {
text-decoration: none;
color: #000000;
}
/* Sidebar */
#sidebar {
float: left;
width: 200px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
*padding: 75px 0 0 0;
}
#sidebar a {
color: #4A5157;
}
.box {
padding: 0 0 0 0;
float: left;
}
.box .title {
height: 27px;
padding: 6px 0 0 0;
background: #C80000;
font-size: 14px;
color: #FFFFFF;
}
.box .content {
padding: 26px;
}
.box ul {
list-style: none;
line-height: normal;
}
.box ul li {
margin-bottom: 13px;
font-size: 12px;
}
.box small {
font-size: 10px;
color: #808C96;
}
/* Menu */
#menu {
width: 1003px;
height: 53px;
margin: 0 auto;
position: absolute;
}
#menu ul {
margin 0;
padding: 6px 0 0 250px;
list-style: square;
line-height: normal;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
height: 25px;
margin: 0 0px;
padding: 5px 15px 0 0;
text-decoration: underline;
font-family: “Times New Roman”, serif;
font-size: 14px;
font-weight: normal;
color: #ff0000;
}
#menu a:hover {
text-decoration: none;
color: #0000ff;
}
#menu a {
color: #FF0000;
text-decoration: underline;
font-size: 14px;
font-weight; normal;
}
#menu .active a {
background: #0000ff;
}
/* Page */
#bg {
background: #ffffff url(images/gremlin5.jpg) no-repeat;
}
#page
{ width: 1003px;
margin: 0;
}
/* Content */
#content {
*padding: 60px 0 0 0;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 14px;
float: right;
width: 750px;
}
#content h1 {
padding: 0 0 0 0;
left: 33px;
}
#content .content {
padding-left: 0;}
/* Posts */
.post h1.title {
margin: 45px 0 20px 0;
padding-left: 33px;
font-family: Arial, Helvetica, sans-serif;
}
.post h2.title {
margin: 40px 0 25px 0;
padding-left: 33px;
}
.post .title a {
text-decoration: none;
color: #292929;} .post .entry { padding-left: 32px;
}
.post ul, .post ol {
margin-left: 3em;
}
.post ul {
list-style-type: square;
}
.post ol {
list-style-type: decimal;
}
/* Footer */
#footer {
height: 93px;
background: url(images/footer.jpg) no-repeat;
font-size: 12px;
position: relative;
margin-top: -93px;
clear: both;
}
#footer p {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* CLEAR FIX*/
.clearfix:after {content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
- html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
and the HTML:
<head>
<meta http-equiv=“content-type” content="{%MetaCharset%}" />
<meta name=“description” content="{%MetaDescription%}" />
<meta name=“keywords” content="{%MetaKeywords%}" />
<title>{%MetaTitle%}</title>
<link href=“Modernside.css” rel=“stylesheet” type=“text/css” />
</head>
<body>
<div id=“wrap”>
<div id=“container”>
<div id=“main” class=“clearfix”>
<div style=“TEXT-ALIGN: right”>
<div id=“logo”>
<h1><a><span style=“color: #000000;”>{%WebsiteName%}</span></a> <img src=“images/summitcountybadgewhite.jpg” height"50"; width=“50”; style=“vertical-align: middle;”><br />
<a><span style=“color: #000000; font-size: 19px; font-weight: normal;”>{%WebsiteSlogan%}</span></a></h1>
</div>
</div>
<div id=“menu”>
<ul>
{%menu_start=1%}
<li><a href="{%menu_href%}"></u><img style=“height: 8px; width:8px;” src=“images/bullet.jpg”;>{%menu_display%}</a></li>
{%menu_end=1%}
</ul>
<hr />
</div>
<div id=“bg”>
<div id=“page”>
<div id=“content”>
<h1 class=“title”><img style=“vertical-align: middle;” src=“images/sherifflogo.gif” width=“80” height=“82” />{%name%}</h1>
<div class=“entry”>
<p>{%content%}</p>
</div>
</div>
<!-- end #content -->
<div id=“sidebar” div style=“display: inline;”>
<h2 class=“title”><center>-News-</center></h2>
<div class=“content”>{%news%}</div>
</div>
<!-- end #sidebar --!>
<div style=“clear: both; height: 20px;”> </div>
</div>
<!-- end #page --></div>
<!-- end #bg -->
</div>
</div>
<hr />
<div id=“footer”>
<p>{%WebsiteFooter%}</p>
</div>
</div>
</div>
</body>
</html>
I fixed a few type-o’s from the last thread, and added “auto” to the “margin” in the Body. That’s when the menus moved. Any suggestions would be greatly appreciated. 