There is about a 14 px gap between two divs; #bot-nav & #foot bot. Can some one tell me how to get rid of this gap and why it is happening. Thanks
Code:
@charset "utf-8";
body {
margin: 0;
padding: 0;
background: #000000;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../Saxstorage/sax-style.css" rel="stylesheet" type="text/css" />
</head>
</style>
<body>
<div id="wrapper">
<div id="header"></div>
<!-- TemplateBeginEditable name="main" -->
<div id="maincontent"></div>
<!-- TemplateEndEditable -->
<div id="bot-nav">
<ul>
<li>Guitarstorage.com</li>
<li>Policies</li>
<li>Contact</li>
</ul>
</div>
<div class="clrflt" id="foot-bot">Content for id "foot-bot" Goes Here</div>
</div>
/body>
</html>
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#wrapper {
background: #E1CC95;
height: 708px;
width: 900px;
position: relative;
margin: 20px auto;
}
#maincontent {
}
#header {
background: url(images/slices/header-bk.jpg) no-repeat;
height: 123px;
width: 900px;
}
#maincontent {
}
#feature {
height: 361px;
width: 707px;
background: url(images/slices/rack-feature.jpg) no-repeat;
text-align: left;
}
#rck_feature {
color: #F6CE6E;
text-decoration: none;
height: 265px;
width: 215px;
margin-top: 80px;
margin-left: 30px;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
padding-top: 13px;
}
#buttons3 {
height: 361px;
width: 193px;
background: url(images/slices/buttons3.gif) no-repeat;
position: relative;
}
.link_bullet {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
}
#copy-3 {
background: url(images/slices/3-copy.jpg) no-repeat;
height: 161px;
width: 900px;
}
#bot-nav {
background: url(images/slices/bot-nav.gif) no-repeat;
height: 41px;
width: 900px;
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: F6CE6E;
list-style: none;
text-decoration: none;
margin: 0px;
padding: 0px;
}
#bot-nav ul li {
float: left;
}
#bot-nav ul {
list-style: url(none) none;
float: left;
}
#foot-bot {
background: url(images/slices/foot-bot.jpg);
height: 23px;
width: 900px;
margin: 0px;
padding: 0px;
color: #FFFFFF;
}
#bullet-1 {
height: 12px;
position: absolute;
top: 80px;
color: #0099CC;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
left: 36px;
}
.fltrt {
float: right;
}
.fltlft {
float: left;
}
.clrflt {
clear: both;
}