Forum Moderators: not2easy
I carefully read the explanation and applied that recommendation, and got the problem fixed.
However, it's cropped up again and I can't seem to vanquish it the same way!
Now I'm modifying a blog (WordPress) theme and attempting to add my navigation to the top of it. Here's the snipped of code:
HTML:
<body>
<div id="logodiv">
<img src="../images/logo.gif" alt="#" /></div>
<div id="header">
<ul>
<li id="current"><a href="/blog/">Blog</a></li>
<li><a href="/photos/">Photos</a></li>
<li><a href="/contact.html">Contact</a></li>
<li><a href="/cal/">Calendar</a></li>
</ul>
</div>
<div id="content">
<div id="topbar">
<ul class="navbar">
<li>
<a id="top" href="#" title="#">blog name</a>
</li>
</ul>
<?php include (TEMPLATEPATH . '/topsform.php');?><!-- search form -->
</div><!-- closes the topbar div -->
<div class="page">Here's my CSS:
body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.5em Helvetica, Verdana, Arial, sans-serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}
html>body {
font-size:small;
}
#header {
float:left;
width:100%;
background:#e1e9ed url("images/bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
margin-bottom: 1em;
}
#logodiv {
float:left;
width:100%;
background:#0f4e73;
font-size:93%;
line-height:normal;
margin: 0px;
padding: 0px;
}
/*---------------------------- Content -------------------------------*/
#content{
margin: 0px auto;
width: 780px;
font-size: 11px;
text-align: left;
}
/*----------------------------Top Bar -------------------------------*/
#topbar{
margin: 1px 0px;
padding: 0px;
width: 778px;
height: 25px;
background-color: #FFFFFF;
border:1px solid #D6D3CE;
font-family: Verdana, Geneva, Arial, sans-serif;
line-height: 17px;
font-size: 10px;
clear: left;
}
#logodiv {
/* added this in to keep my logo from centering, because it belongs on the left */
text-align: left;
}
.navbar{
margin: 0px auto;
padding: 3px 1px 2px 1px;
}
.navbar ul{
display: inline;
list-style-type: none;
}
.navbar li{
display: inline;
list-style-type: none;
}
I've spent hours trying to get this to work, and I'm just out of ideas and energy. I have a feeling one of you will be able to spot my folly pretty quickly and teach me another valuable lesson on what NOT to do... your help will be gladly appreciated.
If you need more info on the blog theme, I will be happy to provide it as long as someone who knows what they are doing tells me it wouldn't be against the rules of the forum to post a link to the theme.
[edited by: SuzyUK at 9:10 am (utc) on Aug. 9, 2005]
[edit reason] examplified code [/edit]
can't see it with this code, and please don't post the theme link ;)
However I strongly suspect Collapsing margins [w3.org]. cEM's advice on setting a zero margin on the top element does confirm this too.
The thing about collapsing margins is any element in the flow of the document will continue to collapse upwards through the document tree. So even though that top element is zero margined any element following it (immediately adjacent or nested) that has default margins e.g. <p>, <ul>, <form> will continue to collapse up through ancestors until it reaches the body element or until the domino effect is halted by a bit of padding or border.
one thing to try to see if this is what's happening is to apply:
* {margin: 0; padding: 0;}You could then go about reapplying margins to the various elements, one at a time, until you find the one causing your gap, zeroing it and controlling spacing another way (e.g. padding) which is a bit time consuming and will not stop it happening again!
another way to stop it forever might be to apply a 1px top border to the top most element in your page tree - the body element?
this might not work for you depending on color scheme/layout but if you can match this top border color to the background color of your page then it might be a "universal" help, that way you shouldn't have to worry about zeroing margins unless you want too for other reasons..
alternatively if the page content div
<div class="page">a lot of sites/blogs use a "wrapper" div nested inside the body element, which is where I would normally suggest adding the border/padding (many sites actually have borders on these anyway so the problem is not obvious) but I don't see one in the code you posted which is why I'm suggesting the body element itself.
Anyway see how you get on and let us know if you can't get rid of it.. there will be a way ;)
Suzy
Thanks for the help with the collapsing margins. I'm still trying to fully understand them. But I DID find the problem! It wasn't in the code I posted. It was this:
html, body {
margin: 20px auto;
padding: 0px;
}
I pulled that out (changed it to 0px) and all was solved! I can't believe it was something so simple! If only I hadn't had that experience before, I would have probably checked BODY first!
So it turns out this had nothing to do with the floats, and everything to do with an explicitly stated margin. Stupid me!
Thanks so much for your help. It was your troubleshooting that led me to the problem!
