Hello and welcome to our community! Is this your first visit?
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

    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!)

    * { 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; }
    "The problem with troubleshooting is that trouble shoots back."

  2. #2
    Registered User
    Join Date
    Jun 2011
    #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?)

    Oroginal Clearfix - Pros: Full browser support, Cons: Bulky, very bulky, requires conditional statements for ie

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

    Add an extra element to clear (wayyy old fashion)
    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;

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

  3. #3
    Regular Coder
    Join Date
    Dec 2010
    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