I've tried writing the CSS to get my footer to stick to the bottom without covering up any of my content, but I can't get it to work properly & it's about to make scream! It works beautifully in IE7 & Firefox, but only on SOME of my pages... which makes no sense because they all have the same basic html & stylesheet. Here's my CSS:

@charset "utf-8";
/* CSS Document */
* {margin: 0;} 

html, body {background: url(img/bg-brown.gif) top center repeat-y; 
background-color: rgb(196, 184, 172); height: 100%;}
.page-container {background-color: #fff; border-left:solid 1px #666; 
border-right:solid 1px #666; height: auto !important; height: 100%; min-height: 100%; 
margin: 0 auto -55px; width: 770px;}
/* header */
.img-header {border: 0px; clear: both; float: left; width: 770px; height: 159px; margin: 0px;
 padding: 0px;}
/* navigation level 1 */
.nav1 {clear: both; margin: 0px; padding: 0px; font-size: .7em;}
.nav1 ul {float: left; width: 770px; margin: 0px; padding: 0px; border-top: solid 1px 
rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); 
font-weight: bold;} 
.nav1 li {display: inline; list-style: none; margin: 0px; padding: 0px;}
.nav1 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; 
border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; 
text-decoration: none; font-size: 100%;}
.nav1 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 770px; height: 30px; margin: 0px; padding: 0px; background-color: 
rgb(255,255,255);}

/* navigation level 2: menu */
.nav2 {clear: both; float: left; width: 160px; min-height: 100%; margin: 0px; padding: 0px; 
color: rgb(0,0,0); font-size: .85em;}
.nav2 ul {width: 160px; margin: 0px 0px 20px 0px; padding: 0px; border-bottom: solid 1px 
rgb(216,206,159); background-color: rgb(219,230,241);}  
.nav2 li {list-style: none; margin: 0px; padding: 0px;}
.nav2 li.title {margin: 0px 0px 0px 0px; padding: 3px 5px 2px 15px; 
background-color: rgb(127, 162, 202); color: rgb(255,255,255); text-transform: uppercase; 
font-weight: bold; font-size: 1.3;}
.nav2 li.group a {display: block; min-height: 1.7em; height: auto !important; height: 1.7em; 
line-height: 1.7em; margin: 0px; padding: 0px 7px 0px 15px; border-top: solid 1px 
rgb(200,200,200); border-left: solid 7px rgb(219,230,241); color: rgb(0,0,0); font-weight: bold;}
.nav2 li a {display: block; min-height: 1.7em; height: auto !important; height: 1.7em; 
line-height: 1.7em; margin: 0px; padding: 0px 7px 0px 20px; border-left: solid 7px 
rgb(219,230,241); color: rgb(0,0,0); text-decoration: none;}
.nav2 li a:hover, .nav3 li a.selected {border-left: solid 7px rgb(156,186,214); color: 
rgb(0,0,0); text-decoration: none;}

/* content */
.content-wrapper {background-color: #fff; margin: 0 auto; width: 609px; float:left;}
.content-pagetitle {border-bottom:solid 3px rgb(127, 162, 202); font-weight: bold; 
font-size:1.15em; color:rgb(127, 162, 202); margin-left: 10px;}
.red-text {font-style:oblique; color:#F00; font-size:14px;}
.important-text {font-style:oblique; font-size:14px;}
.small-text {font-size:.7em; font-style:italic; color: #000;}
.fancy-text {font-family: "Lucida Calligraphy", Monotype Corsiva, Times New Roman, Times, 
serif; font-size:.9em; color: #000; margin-left: 08px;}
.header {font-family:"Monotype Corsiva", Times New Roman, Times, serif; font-size: 1.4em; 
font-weight: bold;}

/* headings */
h1 {margin: 0; padding: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 160%;}
h2 {margin: 0; padding: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 150%;}
h3 {margin: 0; padding: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 140%;}
h4 {margin: 0; padding: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 130%;}
h5 {margin: 0; padding: 0px 0px 0.2em 0px; font-weight: bold; font-size: 130%;}
h6 {margin: 0; padding: 0px 0px 0.2em 0px; font-weight: bold; font-style: italic; 
font-size: 130%;}

/* paragraphs */
p {margin: 0; padding-left: 10px;}
p1 {text-align: center;}

/* lists */
ul.noindent {margin: 0px 0px 7px 15px; padding: 0px; list-style-type: disc; 
list-style-position: outside; font-size: 120%;}
ul.indent {margin: 0px 0px 7px 15px; padding: 0px 0px 0px 15px; list-style-type: disc; 
font-size: 120%;}
ol {margin: 0px 0px 0px 9px; padding: 0px 0px 0px 25px; list-style-type: decimal; 
list-style-position: outside; font-size: 120%;}
ul.linklist-noindent {margin: -0.3em 0px 0.5em 0px; padding: 0px; list-style-type: none; 
line-height: 1.2em; font-size: 120%; }
ul.linklist-indent {margin: -0.3em 0px 0.5em 0px; padding: 0px 0px 0px 10px; 
list-style-type: none; line-height: 1.2em; font-size: 120%;}
li.normal {list-style: georgian;}

/* pop-up calendar */
.ui-datepicker{ background-color: rgb(196, 184, 172); border:1px; 
border-color:#00C; padding:.2em .2em 0; width:12em}
.ui-datepicker .ui-datepicker-header{padding:.2em 0; position:relative; 
background-color:#fff; width:100%; font-size: .62em;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker 
.ui-datepicker-next{position:absolute; height:1.8em; top:2px; width:1.8em; 
font-size: 1em;}
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker 
.ui-datepicker-next-hover{top:1px; font-size: 1em;}
.ui-datepicker .ui-datepicker-prev{left:2px}
.ui-datepicker .ui-datepicker-next{right:2px}
.ui-datepicker .ui-datepicker-prev-hover{left:2px}
.ui-datepicker .ui-datepicker-next-hover{right:2px}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker 
.ui-datepicker-next span{display:block; left:50%; margin-left:-8px; margin-top:
-8px;  position:absolute; top:50%}
.ui-datepicker .ui-datepicker-title{margin:0 2.3em; line-height:1.8em; 
text-align:center}
.ui-datepicker .ui-datepicker-title select{margin:1px 0}
.ui-datepicker select.ui-datepicker-month-year{width:100%}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year{width:49%}
.ui-datepicker table{border-collapse:collapse; font-size:9px; margin:
0 0 .4em; width:100%}
.ui-datepicker th{border:0; font-weight:bold; padding:.7em .3em; text-align:
center}
.ui-datepicker td{border:0; padding:1px}
.ui-datepicker td span, .ui-datepicker td a{display:block; padding:.2em;
 text-align:right; text-decoration:none}
.ui-datepicker .ui-datepicker-buttonpane{background-image:none; 
border-bottom:0; border-left:0; border-right:0; margin:.7em 0 0 0; 
padding:0 .2em}
.ui-datepicker .ui-datepicker-buttonpane button{cursor:pointer; float:right; margin:.5em .2em 
.4em; overflow:visible; padding:.2em .6em .3em .6em; 
width:auto}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}

/* multiple calendars */
.ui-datepicker.ui-datepicker-multi{width:auto}
.ui-datepicker-multi .ui-datepicker-group{float:left}
.ui-datepicker-multi .ui-datepicker-group table{margin:0 auto .4em; 
width:95%}
.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}
.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}
.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}
.ui-datepicker-multi .ui-datepicker-group-last 
.ui-datepicker-header{border-left-width:0}
.ui-datepicker-multi .ui-datepicker-group-middle 
.ui-datepicker-header{border-left-width:0}
.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}
.ui-datepicker-row-break{clear:both; width:100%}

/* footer */
.footer-push {height: 85px;}
.footer {background-color: rgb(127, 162, 202); bottom: 0px; clear: both; 
height: 45px; border-bottom:solid 1px #666; border-left:solid 1px #666; 
border-right:solid 1px #666; font-size: .75em; color: #fff; margin: 0 auto; padding: 5px; 
width:760px;}
.footer p {text-align: center;}
.footer a:link {color: #00f; text-decoration: none;}
.footer a:hover {color: #fff; text-decoration:underline;}
.footer a:visited {color: #00f; text-decoration: none;}
.footer a:visited:hover {color: #fff; text-decoration:underline;}
.footer a:active {color: #00f; text-decoration: none;}

The website is elegantlaser.com. In IE7 the homepage & services & products the footer covers up some of the content while the other pages are fine. In Firefox the footer butts up against the content without a gap, services & products & directions it appears properly at the botton of the page, but there's a gap on the left-hand side which shows through to the background, & all the other pages appear correctly.

If anyone could help me figure out what I'm doing wrong I would appreciate it greatly. Thanks!

  • I don't know why there's a huge gap in the code, & I can't get it to go away... storry of my life, apparently. Kim Lynch about 6 years ago
  • Huh, everything appears correctly in the website screenshot... Kim Lynch about 6 years ago

1 answer

0
points

do you need to support IE6? why not use position:fixed?

body { padding-bottom:85px; /*height of "footer"*/ }
.footer {position:fixed; bottom:0; left:0; width:100%; height:85px;}

If you do need to support IE6, there are several hacks available using the "expression" function.

Answered about 6 years ago by Paul Gueller
  • That sort of worked, except now there's a gap above the footer that shows through to the background. Also, is there a way to make sure that the content is always fully showing, without having to scroll to get the footer to move down? I was under the impression that the: <pre><code>.page-container {background-color: #fff; border-left:solid 1px #666; border-right:solid 1px #666; <b>height: auto !important; height: 100%; min-height: 100%;</b> margin: 0 auto -55px; width: 770px;}</code></pre> part was supposed to do that...? And I will be needing IE6 support, but I figured I'd try & get this up & running on newer browser versions & then go back & apply hacks if needed. Thanks for the link! Kim Lynch about 6 years ago
  • Beautiful, the code snippet doesn't work in a comment. Kim Lynch about 6 years ago
  • the 'height' at 100% does not behave the way you'd think it does. It treats 100% as the full height of the element to display its contents. If you need it to be larger you need to assign a set pixel height. the "gap above the footer" can probably be resolved by adjusting the padding assigned to the body. Do you have a link where this is available to inspect? Paul Gueller about 6 years ago