View Full Version : Weird footer issues

02-08-2012, 05:39 AM
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; }


02-08-2012, 05:56 AM
#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;


02-08-2012, 06:18 AM
your a genius lloyd... pure genuis!! lol

That worked perfect Sammy12... Thanks much!