Member Avatar for pbpyrojust

My content DIV is putting a gap between it and the top DIVs in FireFox, but not in IE 7. Please help. Here is a link to the site. http://www.justwhat.net/real_foods/test/index.php

My site 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>Untitled Document</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" />
<link href="css/home.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="topleft"> 
<div id="top">

</div>
</div>
 <div id="content">
 </div>

</body>
</html>

and here is my CSS

body {
  background-image:url(../images/bg_test.jpg);
  background-repeat:no-repeat;
  background-position:topleft;
  background-color: #d8d7b2;
  margin: 0 ;
  padding: 0;  
  font-family: Tahoma;
  font-size: 12px;
  color: #000000; 
}

#topleft {
background-image: url(../images/top_sides.jpg);
background-repeat: repeat;
height: 100px;
width: auto;
padding :0;
z-index: 0;

}

#topright {
background-image: url(../images/top_sides.jpg);
background-repeat: repeat;
height: 100px;
width: auto;
}

#top {
background-image: url(../images/top.jpg);
background-repeat: no-repeat;
height: 100px;
width: 820px;
margin-left: auto;
margin-right: auto;
padding: 0;
z-index: 0;
}

#content {
background-image: url(../images/body_bg.jpg);
background-repeat: repeat;
height: auto;
width: 820px;
margin-left:auto;
margin-right:auto;
}

Thanks!

  • 2 Contributors
  • 3 Replies
  • 100 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by pbpyrojust

Dani AI

Generated

This thread demonstrates a common, cross-browser layout symptom: a visible gap between stacked blocks in one engine but not another. confirmed the problem was resolved after pointed out CSS issues; for future readers encountering the same gap, the likely causes and reliable fixes are summarized below.

A frequent root cause is collapsing margins: the top margin of the first child inside a container can “escape” its parent and appear as separation between siblings. Another cause is an uncontained float or a parent that does not establish a new block formatting context. Non-invasive fixes that preserve flexible layout include creating a new block formatting context on the parent, or preventing margin collapse with a tiny internal offset (padding or a transparent border). These keep content flow intact without resorting to hard-coded heights.

A quick, safe approach:

  • Create a new block formatting context on the parent (for example, use overflow: auto; or the modern display: flow-root;).
  • Temporarily reset margins on the parent’s first child to confirm whether margin collapse is the issue.
  • Use a 1px transparent top border or 1px padding-top when a quick visual fix is needed.

Troubleshooting workflow: inspect computed styles in developer tools to see which element contributes the vertical gap, toggle suspected properties to isolate the behavior, and validate CSS for accidental typos (property names or malformed values). Avoid relying on fixed heights unless intentionally constraining layout — they often hide the underlying problem rather than solve it.

Further reading: W3C on collapsing margins, MDN: overflow, and a practical explanation at CSS-Tricks: collapsing margins.

Recommended Answers

All 3 Replies

Member Avatar for Member #114696

Here's modofied CSS,

body {
  background-image:url(../images/bg_test.jpg);
  background-repeat:no-repeat;
  background-position:topleft;
  background-color: #d8d7b2;
  margin: 0 ;
  padding: 0;  
  font-family: Tahoma;
  font-size: 12px;
  color: #000000; 
}#topleft {
background-image: url(../images/top_sides.jpg);
background-repeat: repeat-x;
height: 100px;
width:auto;
}

#topright {
background-image: url(../images/top_sides.jpg);
background-repeat: repeat-x;
height: 100px;
width:auto;
}

#top {
background-image: url(../images/top.jpg);
background-image:no-repeat;
height: 100px;
width: 820px;
margin-left:auto;
margin-right:auto;
}

#content {
position:relative;
background-image: url(../images/body_bg.jpg);
background-repeat: repeat-y;
height: 500px;
width: 820px;
margin-left:auto;
margin-right:auto;
}

#footer {
position:relative;
background-image:url(../images/footer.jpg);
background-repeat:no-repeat;
height:100px;
width:820px;
margin-left:auto;
margin-right: auto;
}

#texbox {
position:relative;
margin-top:40px;
margin-left:13px;
}

I havn't done that, but I would also like you to add inverted commas between url("link"). It is good practice.

Basically you have written repeat rather than repeat-x

Member Avatar for pbpyrojust

It still has the gap when I view it with firefox.

Member Avatar for pbpyrojust

It still has the gap when I view it with firefox.

Nevermind! Thanks a lot! I was still trying to screw with the code rather than doing the changes you showed me. thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.