Huge white space at bottom of my page in ie

HTML & CSS
1

Just as the title says. Looks perfectly ok in all other browsers. I just upgraded to ie9, so I wonder if it might be something to do with that?
My troublesome page

I don’t know if it is caused by the html or the css, but I checked out both on w3c validator and it found no errors. Baffled, I’ve never seen this before!

2

Not quite sure what you are asking here. The page looks the same in FF and IE9 to me. On a big screen, there is lots of white space beneath the footer, as it sits under the rest of the content, and the site background is white.

3

Thanks for the reply.

In FF, Safari & Chrome, the page stops at the end of the footer, no more scrolling. In IE, the page keeps scrolling way past the footer if that makes sense?

Maybe if I make a wrapper div for the entire site and see if that changes anything…

4

Nope, that didn’t work either :stuck_out_tongue:

5

O, I see. I think it’s caused by the overflow rule on the <html> element, which really doesn’t belong there:

html {
  margin: 0 auto;
  [COLOR="Red"]overflow-y: scroll;[/COLOR]
  padding: 0;
  width: 100%;
}

Just get rid of that. :slight_smile:

EDIT: in fact, none of those styles really belong there.

6

Ok thanks, cleared all of that junk, but it’s still the same.
I use the overflow-y:scroll; by default for all websites that I make as a fix for pages that are not as tall as the viewport to stop them shifting side to side. I haven’t experienced a problem with it so far…

7

Hm, weird. It worked when I unchecked that overflow on the <html> element in the dev tools. Something flaky going on there (sigh … another dud IE). If I click around on the dev tools the scroll bar disappears, but on refresh it reappears. :frowning:

8

Hmm, so maybe an ie problem then? Well now there’s a novilty!
Ok, I’ll come back to it another time and hopefully some bright spark will spot this thread and know a fix at some point.
Only IE is doing this, all the other browsers are behaving. Odd though, none of my other sites are doing this, but I just can’t fathom what woiuld be causing it on this one…

Thanks for taking a look, much appreciated :slight_smile:

9

There is probably a bug in there causing a problem, but I can’t see it. The only other thing I can suggest is using a proper doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

I’ve seen a few IE9 bugs cleared up by simply upgrading the doctype.

10

Ok thanks, I used this doctype <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

It didn’t change anything though lol. I’m guessing there is something wrong in my footer somewhere. I broke the html down to see if there were any missing closing tags, but found nothing. Can’t find anything in the stylesheet either, so for now I’ll just have to assume Mr Gates has thrown me a banana skin… :stuck_out_tongue:

11

Doh!!! I fixed it. Added a height to the footer div and it is solved.

Many thanks for your help ralph :slight_smile: