...

View Full Version : Weird footer issues



eberdome
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; }


Thanks,
eberdome

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

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-149.png

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

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

That worked perfect Sammy12... Thanks much!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum