Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: footer woes

  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts

    footer woes

    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.

    Code:
    <!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>
    Code:
    /* 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;
    
    	}

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You are feeding the browsers that support min-height height:100% it should be either one or the other. Bonrouge 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.

  • #3
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Nancy,

    I (nearly) solved a similar problem here:

    Newb: Sorry if I couldn't find this. Help with variable and fixed width CSS layouts

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

    Code:
    html, body {
    height: 100%;
    }
    Then apply min-height for browsers that support it and the hack that Ronald mentioned for those that don't

    Code:
    * 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

    Code:
    div#footer {
    margin-top: -50px;
    }
    Hope that helps,

    Kind Regards,

    Gary
    Last edited by Graft-Creative; 12-20-2005 at 10:27 AM.

  • #4
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    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.

  • #5
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    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...

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Make the container position:relative; then absolutely position the footer to the bottom, being sure to give enough bottom padding to the container.

  • #7
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Quote Originally Posted by _Aerospace_Eng_
    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.

  • #8
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts
    NM... its working now. Must have been something I shuffled earlier.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •