white space after the footer, only in firefox and ie

Question

There seems to be random white space after the footer at the bottom of the site, but it only shows up in IE and Firefox. The site pulls up fine in Safari and Chrome. When I try to use inspect element, the white space doesn't seem to fall under any tags. It doesn't seem tied to any footer tags either as removing them didn't change anything. The site link is: http://www.insightdatascience.com.

I've looked at a ton of answers, but none seem to work for my site specifically. Thanks!

Sparrow

I don't have FF or IE availble right now, but what I see in chrome might have something to do with it: GET insightdatascience.com/css/normalize.css 403 (Forbidden) – Javier

I can get the 403 error for the CSS file. IE 9 isn't showing any large white-space areas. This sounds like a temporary cache issue... – Yet

I tried the CSS reset but no luck. not sure why the 403 error is coming, but doesn't seem to on the local host and the white space is still showing at the bottom. – Sparrow

Answer 1

In stylesheetmain.css, you have this rule:

.fellows #insightpictures .buttons {
    margin: 635px auto;
}

Change margin: 635px auto; to margin: 635px auto 0; to remove the bottom margin.

Galactose

Answer 2

I had similiar problem. More general fix for problems like this is to add:

body {
    overflow: hidden;
}

to Your css file.

Splenic

Answer 3

I too had a similar problem, on FireFox only.

I had a typical page-layout with top-pane and bottom-pane etc. whose layout I had set with Grid. By setting the background of the bottom-pane to Pink I was able to see that it covered its intended area ending at the bottom edge of the page. But vertical scrollbar that showed up allowed me to scroll below the bottom-pane, thus showing there was white space under it.

My problem was (caused by the fact) that in the bottom-pane I had just an un-styled H3 in it. By default FireFox gives H3 elements a top and bottom margin and that caused the content to flow over the bottom-edge of the bottom-pane.

The problem went away when I gave the H3 -element margin of 0px.

So I guess the general thing to realize is that even if your container-element (like my bottom-pane) ends neatly at the end of the page, if it has too much content it can overflow and create extra space under it. A general solution then is to set overflow:hidden on such an element. Content does not automatically stay inside the borders of its container. You must explicitly prevent overflow, if there would be some and you don't want it.

Why did I see this problem on FireFox but not on Chrome? Turns out the default style for H3 is different on Chrome, it gives it less bottom-margin, so there was not enough of it to cause the overflow.

Doldrums

Thank youuuu! Of course the glitchy gap on the bottom of the page would be caused by... a heading somewhere! I hate CSS, lol. The worst part is all the other similar (but different) questions and answers I had to dig through before finding yours - the only solution that actually worked. :-) – Irbm