Hey everyone. I’m working on moving from the realm of table-based designs to CSS… But I keep getting this problem with unexplainable vertical spacing between divs. I’ve tried setting the margins of all of the elements to 0, but it doesn’t help UNLESS I add it so that it affects everything, like this:
* {
margin: 0;
}
That gets rid of the weird spacing, BUT it screws up the formatting of the paragraphs in #mainContent. So I’m not using it at the moment.
I’ve also tried adding padding and borders of 0, all with no luck. What I did get to work was using negative margins for #mainContent, as you can see in the full stylesheet (below). This gets rid of the two borders separating the header, main content area, and footer - except when viewed in Firefox, which still shows a border between the header and main content area (but not the footer).
Is there a fix that I should try besides using the negative margins? Because I can’t get that space to go away in Firefox, no matter how far back I push the margins of #mainContent.
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
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: #333333;
}
.oneColLiqCtrHdr #container {
width: 100%; /* this will create a container 100% of the browser width */
background: #FFFFFF url(../_img/body_background.gif) repeat-x 0 230px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColLiqCtrHdr #header {
margin: 0;
background: #c5c5c5;
background-image: url(../_img/header_background.gif);
padding: 0;
}
.oneColLiqCtrHdr #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: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
text-align: center;
}
.oneColLiqCtrHdr #mainContent {
width: 860px;
margin: -21px auto -16px auto;
padding: 0 20px 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
}
.oneColLiqCtrHdr #footer {
margin: 0;
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background: #FFFFFF;
}
.oneColLiqCtrHdr #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 */
text-align: center;
}
The <h1>'s margins is pushing through the parent and as a result it is moving the entire container down, a 1px top padding on “.oneColLiqCtrHdr #mainContent” can fix this though
Or a 1px top border. Or if you don’t want that space altogether then remove the <h1>'s margins
You can read up on margin collapse some more by visiting our reference
Thanks for the quick reply! Okay, the 1px top padding fixed the problem like you said - without the need to have the negative margins. However, I’m still having the same problem in Firefox, whereas in IE and Chrome it looks fine…
Or if you don’t want that space altogether then remove the <h1>'s margins
Doesn’t <h1> already have no margins? I have it set to 0. Although I don’t really understand the need for <h1> in the first place. Isn’t that for header text, not images? Because I’m not using any text in my header, so couldn’t I just get rid of “#header h1” since I already have “#header”? I guess I don’t fully understand what the <h1> tag is for, but when I try to get rid of it the formatting of the page is all messed up…
In any case, I think the problem in Firefox may be something other than margin collapse, because it looks a little different. Here’s what a I mean:
Viewed in Google Chrome WITHOUT 1px top padding:
Viewed in Firefox WITHOUT 1px top padding:
Unlike in IE and Chrome, instead of just having a space with the background showing through, it has a solid white gap above that.
With the 1px top padding added, the background-showing gap goes away in all of the browsers, but that white gap is still visible in Firefox.
Hmm… I tried clearing my cache, but no luck. Also, if I make other changes to the stylesheet and reload the page, they show up, but the bar is still there.
Maybe you can’t see it because of your screen resolution - because I tried making the width of my browser smaller, and the bar disappears as soon as the browser width is the same as the width of #mainContent (900px). But if the browser is bigger than that, the bar appears.
Strangely enough, the bar is a shade of white that I’m not even using in my design (#e9e9e9), and I tested it on anther computer and it was gray instead of white.
Here it is in Firefox 3.6.3 (with the 1px top padding):
Yay! I fixed it. I added “height: 230px;” to the header element to make it stay the exact same height as the Flash movie in the header. It looks like Firefox tends to add spacing below images or Flash when they are in a div, for some reason.
Thanks for all the help man! Looks like everything is working well now.
It looks like Firefox tends to add spacing below images or Flash when they are in a div, for some reason.
Not because it’s Flash, but because it’s in an <object>. Firefox isn’t the only one who does this, and everyone else should be doing it too (even though I’ve also seen they don’t always).
