Is there a CSS solution for this?

[Orion]

Hello all!

Had this issue for a while and have yet to find a suitable solution.

Here's a page I'm working on for one of our graphics guys (does good work) http://www.orionsweb.net/nd/

still lots of little things to do.. no worries on that.

The issue:
The footer... Anyone know of a way to place the footer at the bottom of the browser window (need 800 px height or larger in your browser window to see what I mean). Right now it sits at the bottom of the content.
Using absolute in CSS positionin works however text for content rolls overtop of it on any page that contains more content then the browser height.
Using fixed gives a neat effect in firefox with lots of content as it works as a frame does. but doesn't align the footer to the bottom of the page at all in IE.
relative is default(what you see there now)
static puts the footer directly under the content and under the menu on the left .. not an option.

So anyone tackled this one and found a viable solution that doesn't require a ton of scripting?

I'm looking forward to trying anything anyone can come up with..

Oh, our style sheet as it sits now (needs formating) is at http://www.orionsweb.net/nd/includes/styles.css

Thanks!

[arvana]

Hi Orion,

Position:fixed is the right solution; you just have to increase the z-index of the footer div so that the content doesn't scroll over top.

The main problem is that Internet Explorer doesn't implement position:fixed properly. Luckily, someone has already worked out a bug-fix hack:

http://www.cssplay.co.uk/layouts/fixed.html

Hope that helps!

Arvana
http://arvanadesign.com

[richkoi]

Try this topic:

http://www.webproworld.com/viewtopic.php?t=48128

Rich

[rocky1]

Have you attempted the CSS Overflow property to control the additional text Orion?

See http://www.w3schools.com/css/pr_pos_overflow.asp

Example - http://www.w3schools.com/css/tryit.a...rycss_overflow

This should give you the same scenario you saw in Firefox in IE, placing a scrollbar on your content DIV. This method should allow you to position your footer DIV without the text running over top of it. Obviously you can also style the scrollbar in IE to blend it into the site better.

[rocky1]

Have you attempted the CSS Overflow property to control the additional text Orion?

See http://www.w3schools.com/css/pr_pos_overflow.asp

Example - http://www.w3schools.com/css/tryit.a...rycss_overflow

This should give you the same scenario you saw in Firefox in IE, placing a scrollbar on your content DIV. This method should allow you to position your footer DIV without the text running over top of it. Set it to auto and the scrollbar won't be present unless needed. Obviously you can also style the scrollbar in IE to blend it into the site better when present.

[Percept]

Having a sticky footer is not hard ifg you know how to do it right :)

Have a look at this: http://www.themaninblue.com/writing/...ve/2005/08/29/

[danielle v2.1b]

OK this is totally unglamourous compared to css but it's a piece of fish, it really is that easy by comparison and it's a trick I learned back in the 90s when I learned how to code the hard way - all notepad and experiementation. Hey maybe there is a bug in it today and it doesn't work under certain browsers, but no-one has ever complained to me and I've build a respectable number of sites for big clients and I've never managed to personally see it fault under NS, IE or FF. So here goes!

Step 1 - Make a table to layout your page in

Step 2 - Give it a vertical height of 98% or somewhere there abouts (you can adjust it a little to taste!)

Step 3 - Place your footer info below your layout table

Et voila! On pages with only a couple of lines content, the footer will show at the bottom of the screen and pages with enough to give it a scroll, it'll just fit in as soon as the content finishes. It's also screen resolution indifferent size 98% is always 98%, it scales. And best of all it requires no scripting which means no headaches!

And if anyone does find a bug, please PM me, I'd love to know what it is so I never put my foot in mouth in front of a client!

[danielle v2.1b]

Oh, just thought I best add, I don't think it is official proper syntax to use %s for table heights but hey it works! As my IT consultant dad always says "You can be right, or you can be having a beer"

[Orion]

OOh wow.. great feedback!

on the table solution... using height attribute in a table isn't valid (we can use css to do it though with the table), but I don't want to use tables anyway.

On the other options:
I actually don't want the footer to be fixed at the bottom of the browser window with the text scrolling under. I actually want what relative gives you ONLY when there's not enough content the footer sits at the bottom of the browser window. The goal is to eliminate the nasty looking whitespace below the footer on all browsers. I don't know if there is a solution for it. using height: 100%; in divs' doesn't seem to work very well???? possibly I'm not applying it correctly?

this is good though, I'm going to read all the other articles (already did the w3c one (got it bookmarked lol)

This is great, ty

[Spooky]

How about using a minimum height for your content area? For example:

min-height:580px;
_height:580px;

That would at least ensure that you can set the specific minimum height of the page, and therefore the minimum footer position, and it works in most browsers as far as I am aware.

Just my 2 cents...

[slideri812]

I had the same problem on our relaunched site (just last month). here is what we did:

just before the last closong tag </div> we placed this little ditty:

<br clear="all" /><!-- without this little
NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->

I think that Rhuk came up with this. At leat I recycled it from one of his templates.

It allows the content to push the footer down as far as is needed with the content over running the footer.

[kgun]

Try this:

http://www.csscreator.com/css-forum/

If you use it, come back and tell us how you solved it using CSS.

I use Macromedia Dreamweaver, so I would have asked in one of the Macromedia forums if I had the problem.

http://www.macromedia.com/support/forums/

[Tim]

Take a look at www.lymebaywinery.co.uk to see how I achieved it, using an empty div ("pad") to push the footer to the bottom. I can't remember where I found this solution now but it works, validates and doesn't require tables. I used ems to dictate the height but you could use pixels.

There's another neat solution called 'footerStickAlt' at http://www.themaninblue.com/writing/...ve/2005/08/29/

Let us know how you get on.

Cheers,
Tim