I asked a Snowman to stay at bottom-left corner, but he hates IE6/IE7 as I do, so he runs away!

This should be very easy coding. Even it should be easy using CSS, it does with Firefox. All you need to do is


#snowman {
  position: fixed;
  left: 0;
  bottom: 0;
 }

Unfortunately, IE6’s English is worse than mine, it can’t understand what fixed means. My problem is this Snowman is built by JavaScript, so the CSS tricks can’t be used. Later, I realized with or without doctype can very trouble you.

Basically, if you want an element to stay at bottom, you need information such:

  1. Current Y of viewport,
  2. Current Height of viewport, and
  3. Height of the element, known and unchanged value. 300 pixel in my case.

I ended up with a code like:


snowman.style.top = ((window.pageYOffset ? window.pageYOffset : (document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop)) +
  (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body.clientHeight)) - 300) + 'px';

1   For Y of Viewport


window.pageYOffset ? window.pageYOffset : (document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop)

window.pageYOffset is for Firefox, that doesn’t exist in IE6. If the document declares doctype, document.body.scrollTop is zero and you must get the viewport’s Y from document.documentElement.scrollTop.

2   For Height of Viewport


window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body.clientHeight)

window.innerHeight is for Firefox, that doesn’t exist in IE6, either. If the document declares doctype, document.body.clientHeight is whole document height and you must get the viewport’s from document.documentElement.clientHeight.

It’s pain with IE.