12 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 58 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

This post has now been modified and added to FAQ http://www.csscreator.com/css-forum/sutra25959.html

Positioning footers can be difficult.
Browsers all seem to handle bottom positioning differently.

The best advice I can give is to position the footer after the other content but still in the document flow. In other words have the footer and the content before it positioned relative or floated and cleared.

Many people try to position the footer at the bottom of the page is the content is short. With CSS alone thanks to all the differences between browsers this is not as simple as it seems.

Here's a method that should get you close :?
First you need to make the body of the document fill the viewpoint.html, body{height:100%;} Now IE will expand the height of a box given a height to fit the content. Other browsers need to be given a min-height of 100% for the body and while where at it will get rid of margin and padding.

html, body{height:100%;
margin:0;
padding:0;
min-height:100%;}
Then you need to find a way to push the footer to the bottom of the window or down to the end of the content if the content is longer.
There are at least two ways to do this and many versions of each of them and non that I know of work 100% across all browsers.
The most common way is to position the footer with bottom:0; absolutely or relative. You have to be careful with this as if the content grows or is longer then the viewpoint the footer may cover some content.
The other method is to expand the content container and fit the footer after it.
This is the method I will use here.
Since as we mentioned before IE will expand the container give a height to fit the content we need to give IE a height. We also want to leave room for the footer so we will give IE 95% height. * html #contents{height:95%;}
Then we need to give other browsers that handle height correctly and understand min-height a value. #contents{min-height:95%; margin:0; position:relative;} Then all we need to do is sit the footer after contents. #footer{position:relative; height:5%;}
This will be pretty close in most browsers, I have tested it in:
IE5 and IE6 on windows (works),
Opera 7.54 Linux (works),
Firefox Linux (footer positioned below viewpoint),
Konqueror Linux ( footer positioned straight after content).
As you can see it is far from perfect :roll: I'd like to here results from other browsers then maybe we can fix a few problems and improve the solution.

To fix Firefox and other Mozilla based browsers we can add top:5%; to the footer style.
That will then mess up Opera and IE a little, so we can either target IE and Opera or Mozilla.
I think it's easier to target IE nad Opera

 * html #footer{top:0;} /*IE */
| * > #footer{top:0;} /* Opera using CSS3 selectors that other browsers will support later, look out */
So that takes care of all the browsers I can easily test with, what happens with your browsers?

Here's the whole lot:

html, body{
height:100%;
margin:0;
padding:0;
min-height:100%;
}
#contents{
min-height:95%;   
margin:0; 
position:relative;
}
* html #contents{
height:95%;
}
#footer{
position:relative; 
top:-5%;
height:5%;
}
 * html #footer{ /*IE */
top:0;
}
| * > #footer{ /* Opera using CSS3 selectors that other browsers will support later, look out */
top:0;
}

Here's another great article on footers http://www.alistapart.com/d/footers/

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 58 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

FAQ - Footers

It would be really good if someone with access to a Mac could have a look and see if the footer sits at the bottom of the page or after the content if the content is longer then the viewpoint.
I have attached an simple example page to to make it easy to test.

Thanks.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 12 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

FAQ - Footers

Tony, on Safari your footer stays just below the content whatever you do with the viewport, although the yellow div increases or decreases in height as the viewport height changes. Weird!

In FF_Mac the footer stays with the bottom of the viewport BUT not only does the height change as above, but the distance (margin) from the bottom of the viewport changes too. From about 15px at full size on my 21-inch HR monitor, to starting to overlap (negative margin) when the window is shrunk to about half-height, and fully overlapping as the viewport approaches the height of the content. Double weird!

Life's a b*tch and then you die!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 58 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

FAQ - Footers

Thanks roytheboy,
So it looks like that version of Safari can't understand min-height.
Would I be right in guessing it's Safari 1.

I wonder if there is an easy way to fix IE5 mac so that the footer wont overlay the content.
I'm not too worried about Safari as although it's not positioned exactly right it isn't causing any problems.

The yellow background should expand and contract as the height of the footer is set to 5% of the parent.
Min-height of something like 1.2 em should fix that.

I'll have to think further on IE5 mac, If you come up with anything let me know.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 12 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

FAQ - Footers

Safari 1.0.3 ( v85.8 ).

I have just fired up one of my old Macs and tried your file on IE5.0. The footer stays put at about 150% of the window height (half-way down the page again from the viewport).

As you may have noticed, I'm still learning all this layout stuff!

Life's a b*tch and then you die!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 58 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

FAQ - Footers

Hi roytheboy,
I must have had IE5 on my mind I thought that was what you were talking about with FF_Mac.
FF on Linux handels it fine.
If you still have IE5 fired up and are keen to try something you could try replacing

Quote:
* html #contents{
height:95%;
}
with
 /* start of Holly Hack \*/ 
* html #contents{ 
height:95%; 
}  
/*end hack */
just to see if it helps.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 12 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

FAQ - Footers

It helps a bit, in that it now stays put just below the content. At least it's on the page proper now!

While I had IE5 open, I looked at the form I was taking about in that other thread, and none of the items that I have positioned relatively show up at all in IE5. Do you know why this is?

Life's a b*tch and then you die!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 58 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

FAQ - Footers

Thanks again for having a look.
I don't know why IE5mac would be hiding your relatively positioned elements.
It may be something as simple as the class names with hyphens "terms-t" .

I don't think it would just be position relative alone.

First thing I would try is changing the class names then I would comment out sections of code till the elements show up and slowly add styles back in till the disappear.

Here's a good page that explains Mac CSS Bugs http://www.l-c-n.com/IE5tests/

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 12 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

FAQ - Footers

Simply taking out the 'position:relative;' line brings the items back into play, so it's not the class names or anything else so obvious. Thanks for the link, which I shall look at shortly Smile

Life's a b*tch and then you die!

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 12 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

FAQ - Footers

Well I read the link, then googled for a few hours, then came to the conclusion that I must be the only person to ever find this bug. In a nutshell, anything positioned relatively within a fieldset disappears in IE5.0 Mac. I tried applying all sorts of unrelated IE5 hacks just in case any of them worked, but to no avail. Strangely, if you relatively position form elements like a submit button for example, then click where it should be (with the offset), it becomes visable on_click, then disapears again off_click.

Anyway, in the end I used the IE5 hide hack to hide all the relatively positioned values from IE5. This means that my pixel-perfect layout is not pixel-perfect, but at least the user can see and use all the form elements and text.

Life's a b*tch and then you die!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 58 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

FAQ - Footers

Hi roytheboy,
Looks like you found an interesting bug.

Luckily IE 5 mac is on the way out Laughing out loud although it may be many years before it is safe to forget it completely.

Since you have found a work around it may be a good idea to start a new FAQ topic on forms where you can consolidate the other topic and mention this bug.

My current thinking is that <br /> may be best separator for forms.
Set the width of the labels then have a <br /> after the field.
Then you only have to consider textarea, radio buttons and checkboxes.

The title of the FAQ could be something like " Laying out forms without tables".
If you are not keen to get it started I will get to it eventually :roll:

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 12 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

FAQ - Footers

Tony wrote:
Since you have found a work around it may be a good idea to start a new FAQ topic on forms where you can consolidate the other topic and mention this bug.

My problem, like many, is time. Life is a constant battle for my time involving my clients, family and friends with shared interests. I usually manage to balance them all some how or other, but the lead up to Christmass is always a struggle because I do a lot of work in the motorsports sector and that means launching brochures and website updates etc. ready for the new year. It's always a nightmare and this year is no exception.

I am continuing to watch and learn/help on this forum because I recognise the need to interact with others regularly during the working day. It helps keep me sane, but I can only do so in short bursts of time. Yes, I will happily write one or more FAQs (if you really think I know enough about a particular subject :? ), but it might now have to wait until the new year as I am about to go into panic mode with my schedule ...as usual Shock

Life's a b*tch and then you die!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 58 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

FAQ - Footers

Hi roytheboy,
One of the best ways to learn about a topic is to write about it Smile

I'm sure you have enough knowledge to write about CSS.
The idea here was for others to have a go here, then get feedback before making it a FAQ.

Eventually we will build up a FAQ base but we do need people to have a go at writing them and others to provide feedback.