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
  • 81 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by pbpyrojust
Member Avatar for GreenDay2001

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.