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 32% 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

[Dave Rado]

Re: IE compatible way of forcing footer to bottom of page?

I've found the answer - the solution is described at http://tinyurl.com/a8u5w
.. It is almost identical to the method I was using 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?

Dave

[dorayme]

Re: IE compatible way of forcing footer to bottom of page?

In article
<c1364049-75eb-49b9-9e2d-dd7f520199ab@b6 4g2000hsa.googl egroups.com>,
Dave Rado <dave.rado@dsl. pipex.comwrote:

I've found the answer - the solution is described at http://tinyurl.com/a8u5w
. It is almost identical to the method I was using 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?
>

Morning, Dave. The asterisk in css is a universal selector and unless it
is over-ruled later in the style sheet will have all elements following
its dictates. Thus, to look at a common example, * {margin: 0; padding:
0;} causes all margins and paddings to be set to zero.[1]

The asterisk before the html element is an interesting case and it is
used to take advantage of what has appeared to almost everyone (except
me to a certain extent[2]) as a bad misconception of Internet Explorer
prior to version 7. Because IE is the only truly religious browserit
alone recognises an element higher than the html element, and so it
takes note of the style concerned. Whereas other more atheistic browsers
ignore such babble. This enables authors to talk to IE and tell it to do
things that will not bugger up the other heathen browsers.

------
1. This is something to be done with caution as it then requires the
author to supply all the margins and paddings that were supplied by a
default style sheet (or styles supplied by the browser code).

2. Because of my very deep studies into the mysteries of the html
element and beyond, I have caught glimpses of the Beyond that IE6 (and
lower) instinctively know about. In my case, I have had work hard in a
field that is unnatural to me. I wear a special black cape and a sort of
wizard's hat in my pursuit of what I am calling Root Studies.

--
dorayme

[Dave Rado]

Re: IE compatible way of forcing footer to bottom of page?

Hi dorayme

On 31 Mar, 02:41, dorayme <doraymeRidT... @optusnet.com.a uwrote:

I find it easy enough to add an IE sheet and conditionally link it in
the head of the html.

My problem is that I'm finding some conditional css definitions are
needed just for IE5.5, others for IE6 and below, and still others for
IE7 and below, which means a potential requirement for up to three
conditional stylesheets (although Ben has just helped me get rid of
the "IE7 and below" one, unless I encounter another bug that applies
to IE 7 and below).

I'm already using a conditional stylesheet for IE5-specific styles,
but I do like the idea of using the * html hack to obviate the need to
have an "IE6 and below" conditional stylesheet as well; and it would
also be nice if there were a safe and reliable "IE7 and below" hack as
well, in case I find another bug that applies to IE7 and below but not
to IE8 beta.

I take your point about conditionals within the html body being very
useful at times.

Dave

[dorayme]

Re: IE compatible way of forcing footer to bottom of page?

In article
<e46cd5d4-b0d2-4004-9aa1-10dfa8617181@i1 2g2000prf.googl egroups.com>,
Dave Rado <dave.rado@dsl. pipex.comwrote:

Hi dorayme
>
On 31 Mar, 02:41, dorayme <doraymeRidT... @optusnet.com.a uwrote:
>

I find it easy enough to add an IE sheet and conditionally link it in
the head of the html.

>
My problem is that I'm finding some conditional css definitions are
needed just for IE5.5, others for IE6 and below, and still others for
IE7 and below,...

Do yourself a big favour, forget about IE below 6. At least don't worry
about them unless they so distort your meaning that great disaster can
ensue. For example you have a fan base among traffic engineers in the
darkest and smallest states of Africa and you know they are using less
then IE 6 and you are outlining your latest traffic management plan...

--
dorayme

[Ben C]

Re: IE compatible way of forcing footer to bottom of page?

On 2008-03-31, Dave Rado <dave.rado@dsl. pipex.comwrote:
[...]

I'm still confused about some aspects of this. If you look at the last
mock-up I posted in the previous thread you helped me with ("Is it
possible to vertical align in a div?", and the mock-up at
http://tinyurl.com/2otuph)

That URL expands to

http://localhost/swindle/Dev/Mockups/PosNotRelativeProb.htm