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

    Weird footer issues

    Hey all,

    I seem to be having a problem with a footer and the issue acts differently in each browser. In firefox, when you minimize the browser window and scroll down, you will see a gap between the background, i think it's a padding issue. In safari/chrome, when you do the same, you'll see that it actually cuts the text off then jumps to the bottom where you will again see this background gap that i am referring to. Any help would be great! Thanks in advance fella's!

    Code below!

    Url: http://www.allrealestatemedia.com/

    CSS: (this should be all that you need!)

    Code:
    * { margin:0; padding:0; } 
    html, body { height:100%; background:url(../images/bg.png) repeat-x #fff; color:#666; font:12px Verdana, Geneva, sans-serif; }
    html { overflow:auto; cursor:default; }
    body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px; }
    div#wrapper { min-height:100% !important; background:url(../images/content_bg.png) repeat-y; width:1094px; margin:0 auto; }
    div#content { overflow:visible; padding-bottom:149px; width:1094px; margin:0 auto; }
    div#header { width:1094px; padding:0; height:134px; background:url(../images/header_bg.png) top no-repeat; margin-top:147px; position:relative; z-index:1; margin:0 auto; }
    div#footer { position:relative; padding:0; margin:0 auto; margin-top:-149px; height:149px !important; clear:both; width:1094px; background:url(../images/footer_bg.png) no-repeat; } 
    div#container { width:1000px; margin-left:47px; }
    Thanks,
    eberdome
    "The problem with troubleshooting is that trouble shoots back."

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    #container {
       overflow: hidden;
       zoom: 1;
    }
    When you float you must clear. Floating takes the element out of the flow of the page, clearing will make it's parent take the floated material into account. As of now, the floated content is not part of the page. Therefore it is treated as though it is not there, thus the shadowed background does not go all the way down (because that floated content isn't there)



    overflow: hidden; zoom: 1; is one way to clear: there are others:

    Micro Clearfix - Pros: More modern, Cons: Doesn't have FULL browser support (you will lose about 2%, I'm not sure?)
    http://nicolasgallagher.com/micro-clearfix-hack/

    Oroginal Clearfix - Pros: Full browser support, Cons: Bulky, very bulky, requires conditional statements for ie
    http://www.quirksmode.org/css/clearing.html

    Overflow: Hidden & Auto (I recommend) - Pros: Full Browser support, Cons (very minor): Hides content that overflows (box-shadow) or drop downs/flyouts
    http://www.positioniseverything.net/easyclearing.html

    Add an extra element to clear (wayyy old fashion)
    http://www.w3schools.com/cssref/pr_class_clear.asp
    You can also stick a <br clear="both" /> or a <div class="clear"></div> w/ .clear { clear: both; }, however you will have to stick this below all your clears. You can also individually clear floats with clear: left; and clear: right;

    Sammy12
    Last edited by Sammy12; 02-08-2012 at 06:08 AM.

  • Users who have thanked Sammy12 for this post:

    eberdome (02-08-2012)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    your a genius lloyd... pure genuis!! lol

    That worked perfect Sammy12... Thanks much!
    "The problem with troubleshooting is that trouble shoots back."


  •  

    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
    •