SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer at bottom pain

    Hi guys, I want my footer to be the last thing on the page. I followed the article on the CSS FAQ (Thanks to Paul for tht) but it somehow doesnt work in Firefox.

    If someone cud tell me what the problem is

    TIA

    Code:
    www.cse.iitb.ac.in/~mohitz/ideaz/
    Code:
    /* commented backslash hack \*/ 
    html, body{height:100%;} 
    /* end hack */
    html,body {margin:0;padding:0}
    body {
    	text-align:center;
    	background:url(images/slice.jpg) repeat-x; 
    }/* centre for ie5.+*/
    
    #container {
    min-height:100%;
    height:auto;
    position:relative;
    text-align:left;
    width:800px;
    padding:0px;
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
    line-height: 110%;
    margin: 0px auto;
    background-color:#FFFFFF;
    }
    * html #container {
    	height:100%;
    	width:806px; /* box model hack for ie5.+*/
    	w\idth:800px
    	} 
    
    .clearfix:after { /* clearing hack for mozilla firefox */
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    }
    .clearfix {
    	display:inline;
    }
    /* mac hide \*/
    	* html .clearfix {height: 1%;}
    	 .clearfix {display: block;}
    /* End hide */
     
    #header1 {
    	width:100%;
     	margin: 0px;
    	padding:0px;
    	border:0px;
     	height: 18px;
     	clear:both;
    	float:left;
    	background-color:#5d0001;
    	text-align:right;
    }
    
    #header2 {
    	width:100%;
     	margin: 0px;
    	padding:0px;
    	border:0px;
     	clear:both;
    	float:left;
    	background-color:#FFFFFF;
    }
     
     .buttons {
    float: left;
    width: auto;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    display:inline
    }
    
    .last {margin-right:0} 
     
     
     .buttons_exception {
    	float: left;
    	width: auto;
    	margin-top: 0px;
    	margin-right: 1.65px;
    	margin-bottom: 0px;
    	
     }
     
    #wrapper {
      	padding:0px;
     	border:none;
     	margin: 0px;
     	background: url(../images/strip.gif) repeat-y;
    	clear:both;
    
    }
     
     #left {
    	float: left;
    	background-color:#FFF;
    	margin-top: 5px;
    	width: 160px;
    }
    
    #contents {
    	 font-family: Verdana, Arial, Helvetica, sans-serif;
    	 font-size: small;
    	 font-style: normal;
    	 text-align: justify;
    	 margin: 5px 0 0 170px;
    	 background-color:#FFF;
    }
    
    #footer {
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    height:20px;
    background-color:#5d0001;
    color: #000000;
    }
    #clearfooter{
    	clear:both;
    	height:20px;
    	width:100%;
    }
    div>p {margin:0}
    Code:
    <!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=iso-8859-1" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="container" class="clearfix">
      <div id="header1"></div>
      <div id="header2"><img src="images/header.jpg" alt="Ideaz 2006" /></div>
      
      <div class="buttons">All the butons here</div>
      <div id="wrapper" class="clearfix">
        <div id="left">Content for  id "left" Goes Here</div>
    	<div id="contents">
    	  <p>The main contents reside here.</p>
    	<br />
    <br />
    <br />
    <br />
    
        </div>
      </div>
      <div id="clearfooter"></div>
      <div id="footer">Copyright</div>
    </div>
    </body>
    </html>

  2. #2
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    What happens if you put the "footer" div outside the "container" div??

    Edit:

    And apart from that, also see what happens if you make the "footer" div less than 100%

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Footer reduced to 80 %.
    See
    www.cse.iitb.ac.in/~mohitz/ideaz/
    Nothin nice happens when i move the footer div outside. See a glimpse at
    www.cse.iitb.ac.in/~mohitz/ideaz/outside.htm

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Removing the extra contents solves the problems in Firefox. But it appears awkward in IE at the bottom. THe background image doesnt go till the end Can somethign be done?

  5. #5
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by arag0rn
    THe background image doesnt go till the end Can somethign be done?
    Okay I see... the image itself is too short...

    Amm... maybe a background colour that matches the background image (to disguise the cut off point)... or Photoshop together a different background.

    Or hell, just leave it white... simple always looks nice with websites. It's your call.


Bookmarks

Posting Permissions

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