Wierd space at the top of my div
thersher Apr 22, 2010 6:51 PMI'm using the DW template "oneColFixCtrHdr.css", which I've used before, but never experienced this problem. There is a huge space above the header. I can't quite figure out if it's above the container, or above the header, but I know I can't get rid of it! The site isn't launched yet, but here's the source code:
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Broken Road Ranch:: Clifton, Montana</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../css/oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<div id="navigation"></div> </div>
<!-- end #header -->
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum .......</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor .....</p>
<!-- end #mainContent --></div>
<div id="footer">
<!-- end #footer -->
</div>
<!-- end #container --></div>
</body>
</html>
And here's the css:
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #785219;
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: #5B3F13;
}
.oneColFixCtrHdr #container {
width: 1100px;
margin: 0 auto;
text-align: left;
}
.oneColFixCtrHdr #header {
padding: 0px 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
background-image: url(../images/banner.jpg);
height: 316px;
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
padding: 0 110px;
margin: -25px 0;
background-image: url(../images/main_bg.jpg);
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
height: 377px;
background-image: url(../images/footer.jpg);
}
.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 */
}
#navigation {
margin-top: 240px;
width: 700px;
height: 30px;
margin-left: 150px;
}
Any help is appreciated, as always!

