I can't understand why the Divs #Bot-nav & #foot-bot don't line up in design view. Foot-bot gets pushed to the right of any content that is in #Bot-nav.
What doesn't make sense is that they look fine when "previewing in browser". It's very annoying and makes it hard to design with when previewing in the design window. I'd love to be able to fix this. Thanks, here's the code:
What doesn't make sense is that they look fine when "previewing in browser". It's very annoying and makes it hard to design with when previewing in the design window. I'd love to be able to fix this. Thanks, here's the code:
Code:
<!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 class="clrflt" 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 id="foot-bot">A & S Crafted Products</div>
</div>
</body>
</html>
@charset "utf-8";
body {
margin: 0;
padding: 0;
background: #000000;
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 {
float: left;
color: #F6CE6E;
list-style: url(none) none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#bot-nav ul li {
float: left;
color: #F6CE6E;
list-style: none;
padding-right: 5px;
padding-left: 5px;
}
#foot-bot {
background: url(images/slices/foot-bot.jpg) no-repeat;
height: 23px;
width: 900px;
margin: 0px;
color: #F6CE6E;
clear: none;
float: none;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
padding: 6px;
}
#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;
height: 0px;
font-size: 1px;
line-height: 1px;
margin: 0px;
}