...

View Full Version : footer woes



NancyJ
12-20-2005, 10:44 AM
I'm trying to get my footer to stay at the bottom of the viewport or bottom of the content ( if the content is longer than the viewport). I've followed numerous tutorials, all based around the same principle of having a wrapper with a minimum height of 100% and absolutely positioning the footer at the bottom of it but none of them work for me. In IE the footer sits at the bottom of the content, regardless and in FF it disappears completely.

Ideally I'd like the footer to go accross both the sidebar and the content but as long as its in the right place then I could live with it being just accross the content.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MatchMakers-Recruitment</title>
<style type="text/css">
<!--
@import url("css/style.css");
-->
</style>
</head>


<body id="jobs">
<div id =" mainwrap">
<div id =" contentwrap">
<div id =" masthead">

<h1><a href =" index.asp"><img src="images/mmr.gif" alt =" MatchMakers-Recruitment" width="550" height="34" /><span>MatchMakers-Recruitment.com</span></a></h1>
</div>

<div id =" images"><img src="images/imagestop.gif" width="157" height="125" alt =" " /><img src="images/random/4.jpg" alt =" " /><img src="images/imagesbottom.gif" width="157" height="124" alt =" " /></div>


<div id =" content">
</div>
<div id =" footer">Test</div>
</div>

<div id =" sidebar">
<br />
<a href =" index.asp"><img src="images/mmlogo.gif" alt =" MatchMakers-Recruitment" width="141" height="127" class =" logo" /></a>
<ul id =" nav">
<li><a href =" index.asp" class =" navhome">&raquo; Home</a></li>
<li><a href =" jobs.asp" class =" navjobs">&raquo; Jobs</a></li>
<li><a href =" service.asp" class =" navservice">&raquo; Service</a></li>

<li><a href =" question.asp" class =" navquestion">&raquo; Questionnaire</a></li>
<li><a href =" contact.asp" class =" navcontact">&raquo; Contact Us</a></li>
</ul>
<img src="images/navbottom.gif" />
</div>

</div>

</body>
</html>



/* set defaults */
* {
margin:0px;
padding:0px;
}
ul, ol{
margin-left:25px;
padding-left:25px;
}

html{
height:100%;
margin-bottom:1px;
}

a img{
border:0px;}

/* Layout */

#mainwrap{
width:770px;
margin:auto;
padding:0 1px 0 1px;
}

#mainwrap {
position: relative;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
}

html>body #mainwrap {
height: auto;
}

#contentwrap{
float:right;
width:609px;
}

#masthead{
width:100%;
height:70px;
position:relative;
right:1px;
}

#content{
width:400px;
}

ul#nav{
width:156px;
position:relative;
}


#sidebar{
width:156px;
position:absolute;
top:0;
margin-left:1px;
}

img{
border:0px;
padding:0px;
margin-bottom:-3px;}

/* style */

body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height: 1.3em;
letter-spacing:0.02em;
word-spacing:0.1em;
color:#231963;
background-color:#FFF;
background-image:url(../images/bg.gif);
background-repeat:repeat-y;
background-position:center;

}

h1, h2, h3, h4, h5{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 1em;
}

#mainwrap{
}
#masthead{
background-color:#CCC;
padding-top:25px;
text-align:center;
border-bottom:3px double #999;
}
#content{
padding:15px;
margin-bottom:50px;
}
#sidebar{
text-align:left;
background-color:#E3E1F7;

}
ul#nav{
padding:0px;
margin:0px;
text-align:left;
list-style-type:none;
margin-top:15px;
}
ul#nav li{
font-family:Georgia, "Times New Roman", Times, serif;
height:29px;
}
ul#nav li a{
line-height:29px;
background-image:url(../images/navbg.gif);
display:block;
width:141px;
padding-left:15px;
font-size:12px;
font-weight:bold;
text-decoration:none;
color:#231963;
background-color:inherit;
}
ul#nav li a:hover{
background-position:0 -29px;
color:#639;
}
.logo{
margin-left:5px;
}
h1 span{
display:none;
}
p{
margin:10px;
}
h2{
width:100%;
border-bottom:1px solid #231963;
font-size:1.1em;
line-height:1.5em;}

#index ul#nav li a.navhome, #jobs ul#nav li a.navjobs, #service ul#nav li a.navservice, #question ul#nav li a.navquestion, #contact ul#nav li a.navcontact{
background-position:0 -29px;
color:#639;
}
.row{
clear:both;
padding-left:20px;
padding-top:5px;
}
.label{
font-weight:bold;
width:40%;
float:left;
}
.label2{
width:65%;
float:left;
}
input, textarea, select{
border:3px double #9996B0;
background-color:#E3E1F7;
color:#231963;
font-family:Verdana, Arial, Helvetica, sans-serif;
vertical-align:middle;
}
input:focus, textarea:focus, select:focus{
background-color:#FFF;}
label{
line-height:14px;
padding-left:20px;
}

.nostyle{
border:0px;
margin:0px;
padding:0px;
background:none;
}
fieldset{
width:563px;
padding:5px;
border:3px double #9996B0;
}
legend{
font-family:Georgia, "Times New Roman", Times, serif;
color:#231963;
font-weight:bold;
font-size:1.2em;}
#images{
background-image:url(../images/imagesbg.gif);
width:157px;
text-align:center;
float:right;
margin-right:10px;
*margin-right:5px;
}
#footer{
width:100%;
height:30px;
background-color:#CCC;
text-align:center;
border-top:3px double #999;
margin-left:-1px;

}

_Aerospace_Eng_
12-20-2005, 11:02 AM
You are feeding the browsers that support min-height height:100% it should be either one or the other. Bonrouge (http://bonrouge.com/hcf-fluid.php) demonstrates this nicely in his examples. Use the * html #blah hack for IE to set height:100% or use CSS conditional comments. Since your layout consists mostly of images it would help if you posted a link.

Graft-Creative
12-20-2005, 11:24 AM
Hi Nancy,

I (nearly) solved a similar problem here:

http://www.codingforums.com/showthread.php?t=74875

The main points are to set your html and body elements to 100%



html, body {
height: 100%;
}


Then apply min-height for browsers that support it and the hack that Ronald mentioned for those that don't



* html div#thingy {
height: 100%;
}

div#thingy {
min-height: 100%;
}


Then you need to pull the footer back up into the viewport with a negative margin equal to the height of the footer



div#footer {
margin-top: -50px;
}


Hope that helps,

Kind Regards,

Gary

NancyJ
12-20-2005, 12:24 PM
Cheers, Gary. with a bit of jiggling I got it working. :)

For anyone reading this with the same problem, dont forget to pad the bottom of your content with the height of your footer + a little extra breathing room, else on long pages the footer overlaps the content in FF.

NancyJ
12-20-2005, 12:27 PM
Looks like I've found a problem... in FF the links in the footer arent clickable... any suggestions? without the negative marign they're clickable but obviously the footer is too low then...

_Aerospace_Eng_
12-20-2005, 12:45 PM
Make the container position:relative; then absolutely position the footer to the bottom, being sure to give enough bottom padding to the container.

NancyJ
12-20-2005, 12:48 PM
Make the container position:relative; then absolutely position the footer to the bottom, being sure to give enough bottom padding to the container.
As I said in my original post, I already tried that and it didnt work.

NancyJ
12-20-2005, 12:51 PM
NM... its working now. Must have been something I shuffled earlier.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum