Ok here is my site…
Now what I want to do is have the sticky footer of course down at the bottom as I plan on loading a swf into it which has the background image with the stars sparkling randomly but I cant seem to get the footer to stay at the bottom when there is less content. Could someone help me with this I am using this sticky footer example…
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Many Thanks,
Mike
Okay so I have my swf in there now, but still can’t seem to get it at the bottom of the browser. Any idea where Im going wrong on this.
Yes you are using Ryan Faits footer which is broken in most browsers 
See the FAQ sticky thread as Sitepoint is the home of the sticky footer (because it was developed here with help from me back in 2003)
Here is your page updated with my code and now working in all browsers.
<!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>MODO COMMUNICATION INC.</title>
<!-- Put the following two lines in the <head> section -->
<script src="http://modocom.ca/newsite/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://modocom.ca/newsite/hover.js" type="text/javascript"></script>
<!--<link rel="stylesheet" type="text/css" href="style.css" />-->
<style type="text/css">
@charset "UTF-8";
/* CSS Document */
[B]/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
/* ie8 fix*/
#wrapper:after {
clear:both;
display:block;
height:1%;
content:" ";
}
html, body {
height: 100%;
}
#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
margin-bottom: -90px;
min-height:100%;
}
* html #wrapper {
height:100%
}[/B]
#header {
width: 960px;
height: 175px;
}
#header a img {
border: none;
}
#nav-wrapper {
float: left;
width:180px;
height: 150px;
border-right: thin solid #666;
}
#what, #who, #where, #look, #studies {
margin:0px auto;
padding:0;
position:relative;
text-align:left;
width:200px;
height:30px;
overflow:hidden;
}
#modo, #modo1, #modo2, #modo3, #modo4, #modo-on, #modo1-on, #modo2-on, #modo3-on, #modo4-on {
float:left;
height:60px;
line-height:15px;
font-size:11px;
font-family:sans-serif;
color:#666;
border:0px solid white;
position:relative;
}
#what p, #who p, #where p, #look p, #studies p {
line-height:30px;
font-size:11px;
margin:0px;
padding:0px;
}
.nav_top {
height:30px;
float:top;
}
.nav_bottom {
height:30px;
float:top;
color:#C30;
}
a {
color:#C30;
text-decoration:none;
}
#content {
float: right;
width: 720px;
line-height:18px;
font-size:11px;
font-family:sans-serif;
color:#666;
}
#content p {
margin: 0;
padding: 0;
}
#spacer {
width: 960px;
height: 30px;
clear: both;
}
.footer, .push {
clear: both;
padding: 0;
margin: 0;
height: 90px; /* .push must be the same height as .footer */
width: 100%;
}
/* who is modo */
#person {
height:220px;
}
#who-image {
float: left;
width:130px;
height:200px;
background-color:#C30;
}
#who-text {
float:right;
width:570px;
}
/*where is modo */
#where-map {
float: left;
width:500px;
height:411px;/*background-color:#C30;*/
}
#where-text {
float:right;
width:200px;
}
/* what does modo look like */
#content-folio {
float: right;
width: 700px;
line-height:18px;
font-size:11px;
font-family:sans-serif;
color:#666;
}
#content-folio p {
padding-left: 40px;
}
#slider-wrapper {
margin-left: -40px;
}
#portfolio-image {
padding-top: 20px;
padding-bottom: 40px;
}
/* dropdown menu */
ul.dropmenu {
float: left;
position: relative;
margin: -50px 0 0 0;
padding: 0px;
display: inline;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
/*border: solid 1px #ccc;*/
border-right: none;
display: inline-block;
z-index: 1;
}
.dropmenu li {
position: relative;
list-style: none;
margin: 0px;
padding: 0px;
display: block;
cursor: point;
float: left;
}
.dropmenu li a {
padding: 5px 30px 5px 0px;
display: block;
cursor: point;
/*border-right: solid 1px #ccc;*/
color: #c30;
text-decoration: none;/*background-color: #f1f1f1;*/
}
.dropmenu li a:hover {
background-color: #FFFFFF;
}
/* .dropmenu li span{
display: block;
height: 5px;
width: 5px;
position: absolute;
top: 10px;
right: 10px;
background-color: #666;
}
.dropmenu li a:hover span{
background-color: #C30;
} */
.dropmenu li ul li a {
padding-left: 15px;
}
.dropmenu li:hover ul, .dropmenu li:hover div {
display: block;
}
.dropmenu ul, .dropmenu div {
position: absolute;
display: none;
width: 250px;
padding: 0px;
background:url('http://modocom.ca/newsite/images/dropdown-1.png') repeat;
/*background-color: #E8E8E8;*/
border-bottom: solid 1px #CCC;
}
.dropmenu li div ul {
border: none;
background: none;
position: relative;
display: block;
left: 0px;
}
.dropmenu ul li {
border: 0;
float: none;
}
.dropmenu ul a {
border: 1px solid #CCC;
border-bottom: 0;
padding-right: 20px;
display:block;
color: #666;
}
.dropmenu ul a:hover {
background-color: #FFF;
color: #C30;
}
.dropmenu div ul {
position: relative;
display: block;
}
.dropmenu li div {
border: 1px solid #CCC;
background-color: #f1f1f1;
padding: 5px;
display: none;
position: absolute;
}
/* topmenu */
ul.topmenu {
float: left;
position: relative;
margin: -50px 0 0 0;
padding: 0px;
display: inline;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
/*border: solid 1px #ccc;*/
border-right: none;
display: inline-block;
z-index: 1;
}
.topmenu li {
position: relative;
list-style: none;
margin: 0px;
padding: 0px;
display: block;
cursor: point;
float: left;
}
.topmenu li a {
padding: 5px 30px 5px 0px;
display: block;
cursor: point;
/*border-right: solid 1px #ccc;*/
color: #666;
text-decoration: none;/*background-color: #f1f1f1;*/
}
#nav-two li p {
padding: 5px 30px 5px 0px;
display: block;
color: #C30;
}
.topmenu li a:hover {
color: #C30;
}
</style>
<link rel="shortcut icon" type="image/png" href="http://modocom.ca/newsite/images/favicon.png" />
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="http://modocom.ca/newsite/AC_RunActiveContent.js" language="javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header"> <a href="http://www.modocom.ca" ><img src="http://modocom.ca/newsite/http://www.modocom.ca/newsite/images/logo.png" /></a> </div>
<!-- end of header -->
<!-- The menu -->
<div id="nav-wrapper">
<div id="what">
<div id="modo-on">
<div class="nav_bottom">
<p>+ what is modo</p>
</div>
</div>
</div>
<div id="who">
<div id="modo1">
<div class="nav_top">
<p>- who is modo</p>
</div>
<div class="nav_bottom"><a href="http://modocom.ca/newsite/who.html">
<p>+ who is modo</p>
</a></div>
</div>
</div>
<div id="where">
<div id="modo2">
<div class="nav_top">
<p>- where is modo</p>
</div>
<div class="nav_bottom"><a href="http://modocom.ca/newsite/where.html">
<p>+ where is modo</p>
</a></div>
</div>
</div>
<div id="look">
<div id="modo3">
<div class="nav_top">
<p>- what does modo look like</p>
</div>
<div class="nav_bottom"><a href="http://modocom.ca/newsite/portfolio.html">
<p>+ what does modo look like</p>
</a></div>
</div>
</div>
<div id="studies">
<div id="modo4">
<div class="nav_top">
<p>- modo studies</p>
</div>
<div class="nav_bottom"><a href="http://modocom.ca/newsite/studies.html">
<p>+ modo studies</p>
</a></div>
</div>
</div>
</div>
<!-- end of menu -->
<div id="content">
<ul id="nav-two" class="topmenu">
<li>
<p>brand</p>
</li>
<li> <a href="#">strategy</a> </li>
<li> <a href="#">design</a> </li>
<li> <a href="#">advertising</a> </li>
</ul>
<p><strong>Every organization is unique</strong><br/>
The brand of an organization must be so clear that it becomes the yardstick which its products, behaviours and actions are measured.<br/>
It's image and identity must spring from its roots, its personality, its strengths.<br/>
We're big on brands. Building ideas that work.</p>
</div>
<!-- end of content -->
<div class="push"></div>
</div>
<!-- end of wrapper -->
<div class="footer">
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
'width', '100%',
'height', '100%',
'src', 'StarFooter',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'StarFooter',
'bgcolor', '#ffffff',
'name', 'StarFooter',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'StarFooter',
'salign', 'lt'
); //end AC code
}
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="100%" height="100%" id="StarFooter" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="StarFooter.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="http://modocom.ca/newsite/StarFooter.swf" quality="high" salign="lt" bgcolor="#ffffff" width="100%" height="100%" name="StarFooter" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
</noscript>
</div>
<!-- end of footer -->
</body>
</html>
This works perfectly but one little thing, why is there a little bit of a scroll vertically since the content isnt long is there a way so the footer is right at bottom of the browser for those pages where there will be no scrolling?
Always remove the browser defaults when you don’t need them.
body { margin:0; padding:0}
Excellent!
Thanks guys for the help on this, now only one other question is it possible to have my content go over the sticky footer so my sticky footer is behind some of the content for example on this page, maybe some of the last persons info/image will be infront of the sticky footer…
http://modocom.ca/newsite/who.html
Thanks,
Mike
Hi,
Yes you can make the content overlap with a few changes.
#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
[B] margin-bottom: 0px;[/B]
min-height:100%;
[B] position:relative;
z-index:2;[/B]
}
* html #wrapper {
height:100%
}
.footer, .push {
clear: both;
padding: 0;
margin: 0;
height: 90px; /* .push must be the same height as .footer */
width: 100%;
[B] float:left;[/B]
}
[B].push{height:50px}/* increase/reduce this to overlap more/less */
.footer{
float:left;
margin-top:-90px;
position:relative;
z-index:1;
}
[/B]
You will probably need to set the wmode=“opaque” on the flash so that it can be z-indexed though (see sticky in flash forum).
Excellent, thanks so much works perfectly I believe havent got a chance to check it out in IE yet.
Now one other question how difficult is it to make a fixed footer from this so the repeated stars in flash will always be behind the content at the bottom of the browser so it will always be at bottom of browser even if you have to scroll through content.
Thanks
Mike
A fixed footer is in fact easier but you will need to drop support for Ie6 as it doesn’t understand position: fixed (although there are hacks to make it work in Ie6 but I would advise against that) .
All you need do for a fixed footer is set it to position:fixed and bottom:0;left:0;width:100% and the height you need. Then set the z-index lower than the rest of the page content so that the stars stay underneath the content.
You can see an example of a fixed footer in the latest quiz (although in the quiz the footer is of course on top of the content because that’s where you usually want it).