By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,261 Members | 1,674 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,261 IT Pros & Developers. It's quick & easy.

IE compatible way of forcing footer to bottom of page?

P: 9
Hi
When the height of the content of a webpage is less than the height of
the viewport, I would like to force the footer to the bottom of the
viewport; whereas when the height of the content of the webpage
exceeds the height of the viewport, then I would like the footer to be
at the bottom of the webpage (so not visible until you scroll down to
it).

I tried using the method described at http://tinyurl.com/2upa7l but it
doesn't work in IE6 or in IE5.5 (although it does work in IE7) - see
my mock-ups at http://tinyurl.com/2urjf2 (short content) and
http://tinyurl.com/393k5n (long content).

My problem is that (unfortunately) around a third of users are still using
IE5.5 or IE6 (see http://tinyurl.com/56kp), and I therefore expect a
large percentage of the visitors to my site to be IE 5.5 and 6 users.

Is there any cross-browser-compatible way of achieving the above
objective?

Dave
Mar 29 '08 #1
Share this Question
Share on Google+
13 Replies


drhowarddrfine
Expert 5K+
P: 7,435
What I have done is just use one method for the footer when I know the content won't grow, and when it does grow, I use a different method. In my case, it was always obvious which to use. If it was dynamic, I can't think of how to make it work in IE. Modern browsers (everything else) would be easy though.

Ignore IE5/5.5 . The two people who still use those browsers are thinking of giving up computers. They should also be used to web sites not looking right.
Mar 29 '08 #2

P: 9
Ignore IE5/5.5 . The two people who still use those browsers are thinking of giving up computers. They should also be used to web sites not looking right.
Although the percentage of users who have IE5.5 is small (1.7%), the number of users which that percentage represents is very large. It means that if I get 1000 visitors a day (and I expect to get a lot more than that), 17 of them on average will be IE5.5 users. There are more IE5.5 users than Opera users, and almost as many IE5.5 users as Safari users (Mac and Windows combined). So while taking your point that IE5.5 users must be used by now to sites not displaying properly for them, given the type of site it is that I'm developing (public, and educational) I'm afraid I can't afford to completely ignore them - I wish I could.

So if anyone else can think of a way of achieving this in IE5.5 (even if it means using IE conditional comments), I'd still be extremely grateful.

Dave
Mar 29 '08 #3

P: 9
Ignore IE5/5.5 .
In addition to what I wrote in my previous reply, there is also the point that I can't even get this working in IE6, and there are more IE6 users than there are IE7 users.

Dave
Mar 29 '08 #4

P: 9
Hi

As I've explained in another thread, much as I'd like to, I can't completely ignore IE5.5 users in the context of a website I'm developing - the percentage of people still using 5.5 (1.7%) is large enough that they are going to represent a large number of the visitors to my site; and I'd therefore be extremely grateful for any help in finding a workaround to the following IE5.5 css bug.

See my mock-up of a table at http://tinyurl.com/3cvjzc. It displays correctly in all modern browsers and in IE6 and 7; but in IE5.5 the outside borders of the table don't display, for some reason that I haven't been able to get to the bottom of.

Can anyone work out what it is specifically about my table that IE5.5 can't cope with, and what I need to tweak in my css (using conditional comments if necessary) in order to get it to display correctly in IE5.5?

Dave
Mar 29 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
I've merged these threads since there was no need to start another.

Yes, you will have to use conditional comments if you really think that web sites statistics are the same as your target audience though I know of no one that does that.
Mar 29 '08 #6

P: 9
I've found the answer to the first problem I posted about in this thread, though not to the second one; and it doesn't require conditional comments.

The solution is described at http://tinyurl.com/a8u5w. It is almost identical to the method described at the tutorial I linked to in my first post in this thread, but it includes the following addtional line:

* html #nonFooter {height: 100%;}

With the addtion of this line, it works in all browsers including IE5.5. I don't understand why it works though - does anyone understand the significance of the asterix? And of what the difference is between #nonFooter and * html #nonFooter?

Anyway, I've got that working now; but would still be grateful for the help of anyone who knows how to make table borders display in IE5.5.

Dave
Mar 30 '08 #7

P: 9
I've just discovered that the asterix is a hack equivalent to an IE conditional comment, so I guess I really ought to put that line in as an IE conditional comment after all. But I'm still confused about what the difference is between #nonFooter and html #nonFooter?

Dave
Mar 30 '08 #8

P: 9
Yes, you will have to use conditional comments if you really think that web sites statistics are the same as your target audience though I know of no one that does that.
For example, eBay looks the same in IE 5.5 as in all other browsers and Google is pretty much the same (even Google maps).

Dave
Mar 30 '08 #9

drhowarddrfine
Expert 5K+
P: 7,435
The '* html" stuff is called the "star hack" but star hacks don't work in IE7+. That's why conditional comments are better because you can target certain versions of IE.
Mar 30 '08 #10

P: 9
The '* html" stuff is called the "star hack" but star hacks don't work in IE7+. That's why conditional comments are better because you can target certain versions of IE.
In this instance, where I only want to target IE6 and lower, the star hack is perfect in that case - is there any reason not to use it in this instance?

Also I don't understand the significance of the inclusion of html in the string - why not just
* #nonFooter?

Dave
Mar 30 '08 #11

drhowarddrfine
Expert 5K+
P: 7,435
IE wrongly thinks there is an element above <html>, so * html points to that element.

Using the star hack for those browsers is fine.
Mar 30 '08 #12

P: 9
Thanks.

Regarding the table problem, I've found the answer elsewhere: IE5.5 seems to use the table border in preference to the table cell borders.
Changing the table CSS definition to:

table.Bordered {border-collapse: collapse; border: 2px solid grey;
width: 550px}

fixes the problem without changing the appearance in any other browser, so no conditional comment is required.

Dave
Mar 30 '08 #13

drhowarddrfine
Expert 5K+
P: 7,435
Two web sites you want to visit.
positioniseverything.net
webdevout.com
Mar 30 '08 #14

Post your reply

Sign in to post your reply or Sign up for a free account.