[Solved] Strange space between divs in firefox
newbie
Posted: Sun, 2007-06-03 00:40
I can't seem to get rid of this strange space that occurs between my content div and footer div in firefox. The layout displays perfectly in IE7, but this space in firefox has been driving me crazy! Any help is really appreciated. Here's the 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" />
<title>Death By Spoon</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0 auto; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: left; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #aaa6a2;
}
#container {
padding: 0;
width: 858px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #070d13 url('images/images/gradientborderright.png') repeat-y right;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
/* this overrides the text-align: center on the body element. */
}
#Left {
padding: 0px 7px;
background: url('images/images/gradientborderleft.png') repeat-y left;
}
#header {
height: 110px;
width: 844px;
background: url('images/images/banner.gif') no-repeat top;
}
#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 */
}
#navigation {
padding: 0;
height: 48px;
width: 844px;
background: url('images/images/gradientnav.gif') repeat-x left;
}
#mainContent {
width: 840px;
margin: 0;
padding: 0;
/* remember that padding is the space inside the div box and margin is the space outside the div box */
}
#footer {
margin: 0 auto;
/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
height: 7px;
width: 858px;
background: #aaa6a2 url('images/images/footer.png') no-repeat top;
}
.style2 {
color: #999999;
font-size: small;
padding: 0;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="Left">
<div id="header"></div>
<div id="navigation"></div>
<div id="mainContent">
<p class="style2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p class="style2">Phasellus id nisi in massa tincidunt placerat. Cras sem libero, vestibulum nec, luctus nec, fermentum nec, urna. Mauris accumsan feugiat odio. Etiam porttitor auctor eros. Duis accumsan, ante sit amet lacinia hendrerit, diam est pharetra dui, et condimentum odio libero quis risus. Maecenas vitae odio sit amet sem ullamcorper pulvinar. Vivamus eu diam quis dolor fermentum vestibulum. Etiam blandit urna vel tellus elementum tincidunt. Aliquam ullamcorper semper velit. Ut molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam ac orci. Nunc pulvinar tempor velit. Aenean et justo. Nullam eu diam id orci faucibus bibendum. Suspendisse potenti.</p>
<p class="style2">Vivamus leo velit, interdum ac, commodo quis, porta et, dui. Nam mi sapien, mollis quis, blandit vitae, tincidunt et, purus. Sed ornare volutpat lectus. Donec et sapien. Suspendisse potenti. Nulla facilisi. Proin risus. Morbi dui leo, gravida at, eleifend ut, rhoncus et, pede. Nulla mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin est metus, tristique sit amet, elementum non, nonummy id, erat. Pellentesque magna elit, mollis ut, eleifend id, nonummy sit amet, augue. Cras imperdiet, orci scelerisque tempus vulputate, justo elit euismod nibh, et eleifend massa ipsum id massa. Sed lacinia massa. Nunc tempor pretium odio. Fusce est neque, tempus non, auctor in, mattis nec, tellus. Nullam ultricies.</p>
</div>
</div>
</div>
<div id="footer">
<p> </p>
</div>
</body>
</html>
Moderator
Posts: 5750
Joined: 2004-06-25
Location: Dallas
That's due to margin collapse
Posted: Sun, 2007-06-03 05:52
That's due to margin collapse. Firefox and other modern browsers do it correctly; IE, not so well. See Meyer, Uncollapsing Margins.
Give #footer p {margin: 0;}, or #footer {padding: 1px 0;}.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
newbie
Posts: 3
Joined: 2007-06-03
I tried all the ways to
Posted: Sun, 2007-06-03 12:23
I tried all the ways to uncollapse margins, the space is still occuring.
Moderator
Posts: 12127
Joined: 2004-06-06
Location: London
text-align: left; /* this
Posted: Sun, 2007-06-03 12:31
text-align: left; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
Does it!
try what Gary suggested but on the last 'p' in maincontent.
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me
Moderator
Posts: 5750
Joined: 2004-06-25
Location: Dallas
Two sources of margins to
Posted: Sun, 2007-06-03 21:09
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.
newbie
Posts: 3
Joined: 2007-06-03
IT WORKED! Thanks so much
Posted: Sun, 2007-06-03 22:01
IT WORKED! Thanks so much guys...