I was originally using a div push to keep my footer at the bottom of the page, but was directed to [URL=“http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm”]this page that shows how to have sticky footer in most modern browsers. But for some reason my header is completely out of the picture in all the other browsers except IE7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jquery Cycle Plugin with Paging</title>
<link rel="stylesheet" type="text/css" href="sample_cycle_a.css">
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="jquery.cycle.all.min.js" type="text/javascript"></script>
<script src="sample_cycle_a.js" type="text/javascript"></script>
</head>
<body>
<div id="bodywrapper">
<div id="header"><p>Sticky Footer Test</p></div>
<h2 id="sample">Jquery Cycle Plugin with Paging</h2>
<div id="promomain">
<div class="promogallery">
<img src="117427934569752sm.jpg" width="580" height="350" alt="Center_1">
<img src="117428128343967sm.jpg" width="580" height="350" alt="Center_2">
<img src="117428291462196sm.jpg" width="580" height="350" alt="Center_3">
<img src="117428380391871sm.jpg" width="580" height="350" alt="Center_4">
</div>
</div>
<!--<div id="push"></div> -->
</div>
<div id="footer"><!-- begin footer section -->
<div id="ftrcontent">
<p>© Copyright 2005-2009. All Rights Reserved.</p>
<div id="ftrnav">
<ul id="ftrlinks">
<li><a href="#">Sample Test</a></li>
<li><a href="#">Sample</a></li>
<li><a href="#">Sample</a></li>
<li><a href="#">Sample</a></li>
<li><a href="#">Sample</a></li>
</ul>
</div>
</div>
</div><!-- End footer section -->
</body>
</html>
/* ---------- ---------- ---------- reset ---------- ---------- ---------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
table {border-collapse:collapse; border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}
/* TINY MCE RESET */
body.mceContentBody {
text-align: left;
color: #000;
background: #ffffff url();
}
body, html {
background: transparent url('bkgrnd2.png') repeat-x scroll 0 0;
height:100%;
}
* html #bodywrapper {
height:100%;
}
#bodywrapper {
min-height:100%;
height:auto!important;
height:100%;
/* margin: -133px auto 0; /* changed from 0 auto -133px */
width:960px;
margin: auto;
margin-top: -133px;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#bodywrapper:after {/* thank you Erik J - instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
#header {
height: 120px;
margin: 0 0 6px;
position: relative;
border-top:133px solid #2c2c2c;
}
#sample {
position: relative;
top:180px;
left:180px;
padding-bottom: 10px;
color: #8f8f8f;
font: Arial, Helvetica, sans-serif;
width: 400px;
}
/* this styles the background for the picture container */
#promomain {
background:transparent url('headshadow.png') no-repeat scroll center top;
height:366px;
left:180px;
padding-top:1px;
position:relative;
width:596px;
z-index:5;
margin-top:200px;
}
/* #promogallery {
margin-left:8px;
margin-top:7px;
position:relative;
visibility:hidden; */
.promogallery { height: 350px;
width: 580px;
margin: auto
}
.promogallery img {
margin-top: 7px;
margin-right: 1px;
border: none;
position: relative;
}
.promogallery a {
background: transparent;
text-decoration: none;
color: #a60000;
font: normal 11px/1.2em "Lucida Grande","Lucida sans", Arial, Helvetica, sans-serif;
}
/* #push {
height:133px;
} commented out to remove this */
#footer {
background: transparent url('footer2.png') repeat scroll 0 100%;
height:133px;
width:100%;
margin:auto;/* added from sticky footer */
clear:both; /* added from sticky footer */
}
#ftrcontent {
background:transparent;
font:normal 11px/1.2em Arial, Helvetica, sans-serif;
}
#ftrnav {
background:transparent none repeat scroll 0 0;
border:medium none;
color:#f9f9f9;
line-height:1.22em;
right:145px;
margin-top:-31px;
padding:15px;
position:absolute;
}
#ftrnav li {
display:inline;
padding:5px 3px;
}
#ftrnav a {
color:#f9f9f9;
text-decoration:none;
border-right: 1px dotted #f9f9f9;
margin:0;
padding-right:5px;
}
#footer p {
text-align:justify;
padding: 60px 0 0 160px;
color:#f9f9f9;
}
/* promonav styling */
#promonav {
margin: 5px 0;
text-align: left;
position:absolute;
top: 25px;
right: 50px;
z-index:10;
}
#promonav a, #promonavcyle strong {
margin: 0 2px;
padding: 3px 5px;
border: 1px solid #ccc;
background: transparent;
text-decoration: none;
color: #fafafa;
font: normal 11px/1.2em "Lucida Grande","Lucida sans", Arial, Helvetica, sans-serif;
position:relative;
}
#promonav a.activeSlide {
background: #ddd;
color:#a60000;
}
#promonav a:focus {
outline: none;
}
#output {
text-align: right;
}
did not put px at the end. So changed it back to zero to try again. But this breaks again in IE7
