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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS Footer Problem

    Hi All,

    Can't seem to get my CSS footer to stay at the bottom and not overlay content text - sometimes it does, sometimes it doesn't - depends on the length of the content.
    current CSS:
    Code:
    html, body, #container { min-height: 100%; width: 100%; height: 100%;}
    html>body, html>body #container { height: auto;}
    body { margin: 0; padding:0; }
    #container { position: absolute; top: 0; left: 0;}
    #content {margin-left: 0px; padding-bottom: 3em; height: auto;}
    #footer {clear: both;  bottom: 0; left: 50px; width:700px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#999999;  border: none;}
    /* hide from Mac IE5 */
    /* \*/
    #footer {position: absolute; }
    /* */
    /* Change in Opera 5+ (and some others) */
    html>body div#footer {
        position: static;
    }
    /* Change back in everything except Opera 5 and 6, still hiding from Mac IE5 */
    /* \*/
    head:first-child+body div#footer {
        position: absolute;
    }
    /* */
    Full sheet and example:
    http://www.uk-webpages.co.uk/includes/styleMain.css
    http://www.uk-webpages.co.uk/cell.asp

    Any ideas?

    TIA and happy holidays

    Keltoi

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://www.themaninblue.com/writing/...ve/2005/08/29/

    link about the footerStick technique.

    I had to fidle up your HTML and CSS a little to make it work for you. You need to kill alot of the absolute positioninig to make it work right. I didn't load in your Javascript so I don't know if the navigation slider is still in the right spot after all this.

    Anyways in your HTML put the footer div here:
    Code:
    consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
    consequat, vel illum dolore eu feugiat nulla facilisis at vero 
    </div>
    
    </div>
    <div id="footer" align="center"> 
      &nbsp;&copy; 2005 New Life Christian Fellowship&nbsp;
    </div>
    </body>
    
    </html>
    and the css I changed:

    Code:
    * {
    padding: 0;
    margin: 0;
    }
    html , body {
    height: 100%;
    }
    
    body {
      background-image: url(http://www.uk-webpages.co.uk/images/bk.gif);
      background-repeat: 
    
      repeat-y;background-position: left;
    }
    #container { 
      position: relative;
      min-height: 100%;
    }
    * html #container {
      height: 100%;
    }
    #footer {
      width:700px; 
      font-family:Verdana, Arial, Helvetica, sans-serif;   
      font-size:9px;
      color:#999999;
      margin-left:50px;
      background-color: transparnet;
      border-top: 1px solid #000;
      position: relative;
      height: 30px;
      margin-top: -30px; /* For Certain IE widths */
    }
    
    #content {margin-left: 0px; padding-bottom: 3em; height: auto;}
    
    .txt {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;}
    #head {margin-top:0px;margin-left:50px;height:150px;width:700px;background-image: 
    
    url(http://www.uk-webpages.co.uk//images/globeStatic.jpg);background-repeat: 
    
    no-repeat;position:relative;}
    #head h1 {display:none;}
    #head h3 {display:none;}
    #head img#mainLogo {display:block;}
    #head img#printLogo {display:none;}
    #head div#address {display:none;}
    #head div#flashLogo {top:23px; left:12px; width:204px; height:50px; position:absolute;}
    
    #menu {position:relative;margin-left:0 auto;top:125px;width:695px;height:25px;border-top:1px 
    
    solid #c69865;border-bottom:1px solid #d29051;background-color:#351d11;padding:5px 0 0 
    
    5px;z-index:0;background-image: url(images/sky.jpg);}
    #menu a {position:relative;display:inline;margin:0 15px 0 20px;font:0.8em 
    
    arial,verdana;padding:0;z-index:20;text-decoration:none;color:#efc8aa;}
    #slider {position:absolute;background-color: #efc8aa;border:1px solid 
    
    #d29051;width:85px;height:20px;padding:0;z-index:1;-moz-opacity:.4;filter:alpha(opacity=40);}
    
    a {text-decoration:underline; color:#660000;}
    a:active {text-decoration:none; color:#009999}
    a:visited {text-decoration:underline; color:#009933}
    a:hover {text-decoration:none; color:red}
    
    #content 
    
    {margin-bottom:20px;top:160px;left:55px;width:690px;position:relative;min-height:400px;height:
    
    expression(this.scrollHeight < 400? "400px" : "auto" ); font-family:Verdana, Arial, Helvetica, 
    
    sans-serif; font-size:10px;}
    
    #content2 {margin-bottom:20px;margin-left: 
    
    185px;margin-top:10px;width:560px;position:relative;min-height:400px;height:expression(this.sc
    
    rollHeight < 400? "400px" : "auto" ); font-family:Verdana, Arial, Helvetica, sans-serif; 
    
    font-size:10px;}
    the thing I did have a bit of trouble with after relativing positioning things was the amount of space your #content2 had from the menu above it. IE liked it but FF I added 10px to it so that it would drop down some. Of course now IE is a 10px too low.

    But the footer works right
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for your reply and taking the time to tweek. Doesn't seem to work though. I've posted a test page at:
    http://www.uk-webpages.co.uk/celltest.asp and
    http://www.uk-webpages.co.uk/cellNotesTest.asp?nID=7 or
    http://www.uk-webpages.co.uk/cellNotesTest.asp?nID=4

    sheet at
    http://www.uk-webpages.co.uk/includes/styleMaintest.css

    I don't know, I've tried a number of versions and can't seem to get the footer to work right. I'm starting to think that just setting the background colour and letting it float over the content might be the way to go.

    DOn't like to throw in the hat though...

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    What browser are you using? It works fine for me on Opera * IE6 and FF.

    on this link:
    http://www.uk-webpages.co.uk/cellNotesTest.asp?nID=7

    do you mean it's not working because the text overflows the footer? If so just give the #content2 a bigger bottom margin.
    Code:
    #content2 {margin-bottom:50px;margin-left: 
    
    185px;margin-top:10px;width:560px;position:relative;min-height:400px;height:expression(this.sc
    
    rollHeight < 400? "400px" : "auto" ); font-family:Verdana, Arial, Helvetica, sans-serif; 
    
    font-size:10px;}

    The footer has a negative top margin so it can move into the browser window. you just need to compensate the content2 for that.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Lincoln (UK)
    Posts
    138
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry, was a bit blind there...

    Have fiddled and got a good result, I see what you mean about the differance between IE and FF (about 15px) have added a hack to adjust:
    Code:
    #footer {
      width:700px; 
      font-family:Verdana, Arial, Helvetica, sans-serif;   
      font-size:9px;
      color:#999999;
      margin-left:50px;
      background-color: transparent;
      border-top: 1px solid #000;
      position: relative;
      height: auto;
      margin-top: -15px; /* For Certain IE widths */
    }
    body>#footer {margin-top:-30px;}
    havn't got opera at the moment so havn't checked that (suppose I should download it...)

    Once again thanks for all your help.


  •  

    Posting Permissions

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