Whitespace at bottom of page in IE7 and Chrome only

Question

Hi. I'm seeing extra whitespace at the very bottom of this page but only in IE7 and Chrome (and, as would be expected, in IE8 in IE7 Mode and Compatibility Mode). Here's what it looks like for me in IE7. I've examined the code using Firebug and the IE Developers Toolbar and didn't find any abnormalities. Anyone know what is causing this browser-specific whitespace? Thanks.

Answer 1

You can try this in your CSS:

* { margin:0px; padding:0px; }

If that works, then some element's padding or margin is causing the issue.

BTW, I get whitespace on Firefox as well.

Answer 2

Try removing the 100% height from body and html in CSS.

I am not perfectly sure if this is the reason, but I've seen bugs in the box model along with 100% height on elements creating this kind of problems.

BTW, it is in line 57 of your screen.css file.

Answer 3

The reason you're getting the whitespace is because you're using relative positioning for the logos in your footer. Use absolute positioning instead.

Relative positioning shifts elements relative to their original position, but their original position is still "taken" and subsequent elements act as if nothing has changed.

So the whitespace is caused by the original positions those logos took up. If you comment out position: relative on all of the elements inside the footer you will see what is causing that whitespace.

Of course, absolute positioning isn't the only way to fix it, but it's certainly the easiest. You could also float them, use display: inline-block, display: table-cell perhaps, or even still use relative positioning, as long as you take the above into account (e.g. play with negative margins).