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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts

    Need help with Sticky Footer

    Hello -

    So i am using Sticky Footer. Although the background does not meet with the footer background. Anyone know why? Code below:

    Code:
    html, body { height:100%; background:#FFF; font:13px Calibri, Verdana, sans-serif; }
    body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px; }
    div#wrapper { min-height:100%; }
    div#content { overflow:auto; padding-bottom:256px; background:url(../images/bg.png) repeat-y; width:932px; margin:0 auto; position:relative; }
    div#header { width:932px; padding:0; height:134px; background:url(../images/header_bg.png) no-repeat center; position:relative; z-index:1; margin:0 auto; }
    div#menu-left { width:28px; height:57px; background:url(../images/menu_left.png) no-repeat; position:absolute; left:-12px; top:134px; z-index:2; }
    div#menu-section { width:900px; height:57px; background:url(../images/menu_bg.png) no-repeat; position:absolute; left:16px; top:134px; }
    div#search { position:absolute; right:53px; top:90px; }
    div#menu-right { width:34px; height:57px; background:url(../images/menu_right.png) no-repeat; position:absolute; right:-18px; top:134px; z-index:2; }
    div#footer { position:relative; margin:0 auto; margin-top:-257px; height:256px !important; clear:both; width:932px; background:url(../images/footer_bg.png) no-repeat; }
    Link: http://www.gorillaonemedia.com/home.php


    Thanks in advance!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello eberdome,
    You only get one full-height element so your background image needs to go on that one.
    Try it like this -
    Code:
    div#wrapper { 
    min-height:100%;
    width: 932px;
    margin: 0 auto;
    background:url(../images/bg.png) repeat-y; 
    }
    div#content { 
    overflow:auto; 
    padding-bottom:256px; 
    /*background:url(../images/bg.png) repeat-y; */
    width:932px; 
    margin:0 auto; 
    position:relative; 
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    eberdome (02-24-2011)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    Excavator,

    Thanks for the quick reply! Your solution worked great! You always save my ***! Thanks again!

    - eberdome


  •  

    Tags for this Thread

    Posting Permissions

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