CSS Forum

**Daman** · 08-22-2007, 11:36 AM

Hello,

I am having a difficult time closing the gaps between 3 div layers. If you preview the site below in Firefox there is spacing between the layers. Why does it look fine in IE? How can I get this to look as it does in IE with Firefox?

http://ss-interactive.com/new/

Thanks!

**Daman** · 08-22-2007, 11:41 AM

Here is the code:

HTML Code:

<html>
<head>
<title>Interactive</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="body">
	<div id="body_header">
		<img src="images/ssi_v.2_01.gif" width="780" height="295" alt=""></div>
	<div id="body_main">
<br><br><br><br><br><br><br>
  </div><div id="body_footer"></div>
</div>
</body>
</html>

**LadynRed** · 08-23-2007, 01:07 AM

First, you're approaching this backwards. Don't try to force FF to look like IE, IE does things WRONG. Make it look right in FF first, THEN kick IE until you get it to look more like FF - they will never be EXACT.

I don't know why you bother with tables.. UGH!
You have a problem here:

Quote:

#body_main {
width:780px;
background-color: #74563A;
background-image: url(images/body_bg1.gif);
background-repeat: no-repeat;
background-position: 160px top;
top: 305px;
}

Unless you're using absolute or relative positioning, that top:305px does nothing, you would need to use margin-top: 305px to effect the same position. However, if you do that, then your main body section will be much further down the page, so you'll have to adjust it to a much smaller number, if not zero. Then you can address where the footer is appearing.

**Daman** · 08-23-2007, 11:41 AM

What I have noticed is that the gaps only appear when I use the <p></p> tags in the body_main div. If I replace with <br> tags the gaps are gone. What gives?

Code:

body {
	text-align: center;
	margin-top: 10px;
	margin-right: 0px;
	margin-left: 0px;
  }

#body {
	margin: 0 auto;
	width: 780px;
}

#body_header {
	width:780px;
}

#body_main {
	width:780px;
	background-color: #74563A;
	background-image: url(images/body_bg1.gif);
	background-repeat: no-repeat;
	background-position: 160px top;
	margin-top: 0px
}
#body_footer {
	background-image: url(images/body_footer.gif);
	background-repeat: no-repeat;
	height: 76px;
	width: 780px;
}
main_menu a:link {
	padding-left: 15px;
}

**LadynRed** · 08-23-2007, 10:21 PM

Paragraphs have a default amount of margin and/or padding. Zero them out to start with, then adjust as necessary.