CSS Footer

[dave@wickmanstudios]

Alright well I have been working on getting this footer to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest just like it is found on here.

So I went through the entire thing, cleaned up my CSS and tried to get everything to work, but the footer just floats at the bottom of the browser window, but when the content goes beyond the window it just stays in that same position.
I hope it is just something simple I am glossing over, but any help would be appreciated. Cheers.

I have uploaded it, so that you can see the live design.

Main Page

CSS

[PR Design]

Try adding

clear:both;

to your footer code

[Carrotnapper]

try removing:

position: relative;

do you really need all of that css

[PR Design]

Well that's my footer CSS:

#footer{
	clear:both;
	padding-top:2px;
	height:225px;
	color:#FFFFFF;
	background-color:#111111;
	background:url(images/footerbglrg.gif);
	border-top:5px solid #0099ff;
	color:#FFFFFF;
	font-family:"trebuchet ms", Verdana, Arial, Helvetica, sans-serif;
	font-size:smaller;
}

And that gives the result you're after.

[dave@wickmanstudios]

awesome... seems to be working now!
Thanks for the help. Cheers

[PR Design]

Happy to help :)

[dave@wickmanstudios]

i tried some of the suggestions and it works for the most part, but when i leave the margin-top commented out (thinking that may be the problem), the footer sits just below the page (both in IE and firefox), but if I uncomment it, it just goes back up to the higher position in IE and is perfect in firefox...

This is how it is now (good in firefox, but not perfect in IE):

#footer{
margin-top: -3.65em;
margin-bottom:0px !important;
clear:both;
padding-top:2px;
height:45px;
color:#FFFFFF;
background: #0055a5 url(images/footer.gif) repeat-x;
}

any ideas on how to get this to function correctly in IE?

[PR Design]

I've just noticed that in FF the footer text isn't selectable, nor can you right click>view background image. It bet the problem is linked to this...

[dave@wickmanstudios]

Originally Posted by PR Design

I've just noticed that in FF the footer text isn't selectable, nor can you right click>view background image. It bet the problem is linked to this...

I think that is because the

margin-top: -3.65em;

moves the bar from it's current position up by 3.65em, but looks like just visually and the actual selection is underneath (and not accessible) in FF.
So, I commented out this line and it drops the bar just below the visible line of the browser window and the text is able to be selected and the the bgimage viewable (both IE and FF)...