Hi Everyone,
I have a very simple site layout that I am trying to merge into a shopping cart application.
I have created the layout in Dreamweaver and it looks fine there, but when I preview it in the browser, I get gaps between the 'campaign' banner, the 'body' and the 'footer', can anyone help? Pulling my hair out here!
Look forward to your replies.
Here is the HTML
<!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="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div id="page">
<div id="header_holder">
<div id="logo"></div>
<div id="cart">
<div id="e_basket"><%e_basket%></div>
</div>
</div>
<div id="menu">
<div id="menu_l"></div>
<div id="menu_body">
<div id="e_menu"><%e_menu%></div>
</div>
<div id="menu_r"></div>
</div>
<div id="campaign"></div>
<div id="body">
<div id="body_holder">
<div id="e_page"><%e_page%></div>
</div>
</div>
<div id="footer">
<div id="footer_l"></div>
<div id="footer_body">
<div id="footer_holder">
<div id="e_toolbar"><%e_toolbar%></div>
</div>
</div>
<div id="footer_r"></div>
</div>
</div>
</center>
</body>
</html>And here is the CSS
body {
margin:0px; padding:0px;
background:url(site_bg_2.png) 0 0 repeat-x fixed;
}
#page {
height:880px;
width: 950px;
}
#header_holder {
height: 100px;
width: 950px;
}
#logo {
height: 100px;
width: 600px;
float: left;
}
#cart {
float: right;
height: 100px;
width: 350px;
}
#menu {
height: 30px;
width: 950px;
}
#menu_l {
float: left;
height: 30px;
width: 29px;
background:url(menu_bg_l.png) no-repeat top;
}
#menu_body {
float: left;
height: 30px;
width: 892px;
background:url(menu_bg.png) repeat-x top;
}
#menu_r {
float: left;
height: 30px;
width: 29px;
background:url(menu_bg_r.png) no-repeat top;
}
#campaign {
height: 250px;
width: 950px;
background:url(campaign_bg.png) repeat-x top;
}
#body {
height:400;
width: 950px;
background-color:#FFFFFF;
}
#body_holder {
margin: 20px;
height: 360px;
width: 910px;
}
#footer {
height: 200px;
width: 950px;
}
#footer_l {
float: left;
height: 200px;
width: 29px;
background:url(footer_bg_l.png) no-repeat top;
}
#footer_body {
float: left;
height: 200px;
width: 892px;
background:url(footer_bg.png) repeat-x top;
}
#footer_holder {
height: 160px;
width: 892px;
margin-top: 20px;
margin-bottom: 20px;
}
#footer_r {
float: left;
height: 200px;
width: 29px;
background:url(footer_bg_r.png) no-repeat top;
}