IE compatible way of forcing footer to bottom of page?

[Dave Rado]

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

[drhowarddrfine]

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.

[Dave Rado]

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

[Dave Rado]

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

[Dave Rado]

Outside table borders don't display in IE5.5

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

[drhowarddrfine]

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.

[Dave Rado]

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

[Dave Rado]

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

[Dave Rado]

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

[drhowarddrfine]

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.

[Dave Rado]

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

[drhowarddrfine]

IE wrongly thinks there is an element above <html>, so * html points to that element.

Using the star hack for those browsers is fine.

[Dave Rado]

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

[drhowarddrfine]

Two web sites you want to visit.
positionisevery thing.net
webdevout.com