I am using the sticky footer code from sticky footer website.

 

I am in process of building my website.

 

I have a little issue. I do prefer to code with split view in Dreamweaver so I can see it as I go along. Problem is I have the footer not sticking tot the bottom in dreamweaver, the #main div not going to the bottom and a UL list that gets cut off at the bottom. This only happens in Dreamweaver, and seems to render find in various browsers. It's more of an annoyance really

 

Just wondering if this is a dreamweaver issue, or am I missing something in the code?

 

 

I have the UL list at the bottom inside a div - div#equipment. However, I'd like there to be a gap of aroun d 50x pixels between that and the footer. Is the only way to do that to use 'margin-bottom: 50px'?

 

Code;

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jp Wild - Biography</title>
<link rel="stylesheet" href="../css/nivo-slider.css" type="text/css" media="screen" />
<link href="../css/master.css" rel="stylesheet" type="text/css" />

</script>
<script src="../scripts/jquery.nivo.slider.js" type="text/javascript">
</script><!--[if !IE 7]>

       <style type="text/css">

               #wrap {display:table;height:100%}

       </style>

<![endif]-->
</head>
<body>
<div id="wrap">
<div id="header_container"><img class="header_image" src="../images/header.jpg" alt="logo" /></div>
<div id="central">
<div id="slider_wrapper">
<div id="slider" class="nivoSlider"><img src="../images/slide1.jpg" alt="" /> <img src="../images/slide2.jpg" alt="" /> <img src="../images/slide3.jpg" alt="" /></div>
</div>
</div>
<div id="nav_container" class="biography">
<ul id="prinav">
<li id="home"><a href="/"></a></li>
<li id="biography"><a href="/biography"></a></li>
<li id="portfolio"><a href="/portfolio"></a></li>
<li id="contact"><a href="/contact"></a></li>
</ul>
</div>
<div id="bar"></div>
<div id="main">
<div id="top_content_biography">
<h1>My Landscape Portfolio</h1>
<p>This is my landscape portfolio, and I hope you enjoy it. I love taking landscape photos and framing my creative vision on the subject. I have traveled all over the UK, and I enjoy this. I am experienced in all the locations in the UK from Cornwal, Lake District and all the way up to scotland. Please findbelow some examples of my landscape photography.</p>
</div>
<div id="equipment">
<h1>The Tools of the Trade</h1>
<p>Since I've been doing photography I specialise in the area that is digital photography. My prefered brand of camera is Canon. The reason I chose Canon is because I feel more at home with this and how the camera works suits me. I find the quality of lenses available to be stunning.</p>
<ul>
<li>Canon 5D Mark II</li>
<li>Canon 17-40 F/4 L</li>
<li>Canon 24-70 F/2.8 L</li>
<li>Canon 70-200 F/4 L</li>
<li>Canon 580EX II</li>
<li>Various polarizers</li>
<li>Lowepro backpacks</li>
<li>Lee Hard and Soft ND Grad Filter</li>
<li>Lumiquest lighting options</li>
</ul>
</div>
</div>
</div>
<div id="footer_container">
<div id="footer">
<p>Website designed and developed by jpwild.<br />
All rights reserved and copyright 2011</p>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$(window).load(function() {
   $('#slider').nivoSlider();
});
//]]>
</script>
</body>
</html>

 

@charset "utf-8";
/* Start Misc*/
* {margin: 0; padding: 0;}
html, body {height: 100%;}
#wrap {min-height: 100%; background-color: #f8f8f8; width: 100%} 
p {
font-size: 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #3D2C00;
line-height: 18px;
}
h1 {
font-size: 18px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #2E5E72;
margin-bottom: 10px;
font-weight: bold;
}
h2 {
font-size: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #3184B6;
margin-bottom: 10px;
}
.clear {clear:both}
ul {list-style: none}
/* End Misc-------------------------------------------------------------------------------------------------------- */
/*Header Content*/
#header_container {width: 100%; background-color: #333333; height: 51px; background-image: url(../images/header_bg.jpg) ; background-repeat:repeat-x;}
img.header_image {width: 285px;  height: 41px; display: block; margin-left: auto; margin-right: auto;}
/*End Header Content*/
#central {overflow: hidden; width: 100%; height: 364px; background-color: #66CCFF; background-image:url(../images/central_bg.jpg); background-repeat:repeat-x}
img.central_image {width: 503px;  height: 343px; display: block; margin-left: auto; margin-right: auto;}
/*Start Main Nav*/
#nav_container {width: 100%; height: 35px; background-color: #0066FF; background-image:url(../images/main_nav_bg.jpg); background-repeat:repeat-x;}
#prinav {background: url(../images/main_nav_buttons.jpg);height: 35px; width: 520px; margin: 0 auto; position: relative;}
#prinav li {list-style-type: none; float: left;}
#prinav a {height: 35px; display: block;}
#home {width: 130px; }
#biography {width: 130px;}
#portfolio {width: 130px;}
#contact {width: 130px;}
#home a:hover {background: url(../images/main_nav_buttons.jpg) 0px -35px no-repeat;}
#biography a:hover {background: url(../images/main_nav_buttons.jpg) -130px -35px no-repeat;}
#portfolio a:hover {background: url(../images/main_nav_buttons.jpg) -260px -35px no-repeat;}
#contact a:hover {background: url(../images/main_nav_buttons.jpg) -390px -35px no-repeat;}
.home #prinav li#home a {background: url(../images/main_nav_buttons.jpg) 0px -70px no-repeat;}
.biography #prinav li#biography a {background: url(../images/main_nav_buttons.jpg) -130px -70px no-repeat;}
.portfolio #prinav li#portfolio a {background: url(../images/main_nav_buttons.jpg) -260px -70px no-repeat;}
.contact #prinav li#contact a {background: url(../images/main_nav_buttons.jpg) -390px -70px no-repeat;}
/*End Main Nav*/
/*Start Sec Nav*/
#sec_nav {width: 100%; height: 24px; background-color: #333333; background-image:url(../images/sec_nav_bg.jpg); background-repeat:repeat-x; padding-top: 9px;} 
#sec_nav ul {margin: 0 auto; width: 700px; text-align: center; height: 27px; background-color: transparent;}
#sec_nav li {display:inline; padding-right: 20px; font-size:12px; font-family: Sans-serif, Arial, Verdana, Helvetica; font-weight: normal; font-weight:bold}
#sec_nav li a {text-decoration: none; color: white;}
#sec_nav li a:visited {color: grey;}
#sec_nav li a:hover {color: white; text-decoration:underline;}
#sec_nav li a:active {color: yellow;}
#sec_nav li a.selected {color: #0099FF}
/*End Sec Nav*/
#bar {height: 10px; background-color:#333333; background-image:url(../images/bar.jpg); background-repeat:repeat-x}
/*Start Main*/
#main {
overflow: auto;
margin: 0 auto;
width: 860px;
padding-bottom: 100px;	
clear: both;
padding-top: 50px;
}
/*End Main*/
/*Start Biography Content*/
#top_content_biography {
background-color: #FFFFFF;
border:solid;
border-color: #E8E8E8;
border-width: 1px;
border-style:solid;
height: auto;
width: 820px;
float: left;
padding: 15px;
margin-left 3px;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius: 8px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;

}
#equipment {
background-color: #FFFFFF;
border:solid;
border-color: #E8E8E8;
border-width: 1px;
border-style:solid;
height: auto;
width: 820px;
float: left;
padding: 15px;
margin: left 3px;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius: 8px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;
margin-top: 50px;
clear: both;

}
#equipment ul{}
#equipment li{
color:#3D2C00;
font-size:12px;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*End Biography Content*/

/*Portfolio Content*/
#top_content_portfolio {
background-color: #FFFFFF;
border:solid;
border-color: #E8E8E8;
border-width: 1px;
border-style:solid;
height: 100px;
width: 820px;
float: left;
padding: 15px;
margin: left 3px;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius: 8px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;

}
#portfolio_blocks {

	margin-top: 150px
}
#portfolio_blocks li {
list-style: none;
display: block;
float: left;
width: 398px;
height: 240px;
padding: 10px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
border:solid;
border-color: #E8E8E8;
border-width: 1px;
background-color: white;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius: 8px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
border-top-left-radius: 15px;	
}
#portfolio_blocks img {border:solid; border-color:#CCCCCC; border-width: 1px; height: 123; width: 252px; float: right; margin-left: 10px;; margin-bottom: 10px}
#test {
height: 30px;
background-color: red
}
/*End Portfolio Content*/

/*Footer Content*/
#footer_container{
position: relative;
margin-top: -100px;
width: 100%;
height: 100px;
background-color: #2C525F;
clear: both;
}
#footer {
margin: 0 auto;
width: 290px;
height: 60px;
padding-top: 40px;
}
#footer p {
color: white;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
border:solid;
border-color:#FFFFFF;
border-width: 1px;
}
/* End Footer Content*/
/*Opera Fix*/
body:before {content:""; height:100%; float:left; width:0; margin-top:-32767px;}
/*End Opera Fix*/

Dreamweaver's preview sucks. Do yourself a favour: give yourself more room to see your code by closing design view altogether and rely on your favourite browser to preview.

 

I recommend Firefox with Firebug.

Dreamweaver's preview sucks. Do yourself a favour: give yourself more room to see your code by closing design view altogether and rely on your favourite browser to preview.

 

I recommend Firefox with Firebug.

 

 

QFTW (and +1'd)