Footer won't clear main page in IE7

Validate your website.

Hi Matthisco,

While Validating your site is often a good idea, your problem doesn’t seem to be related to that.

Your <footer id="colophon" role="contentinfo"> has a padding-bottom of 40px. Partly due to the quirky nature of IE7, this is what’s causing the extra white space below your footer in IE7. Take that 40px of padding away, your footer doesn’t have any white space below it.

The other part of the problem is the way you’ve styled the footer. You have your <footer>, and inside that is <div id="supplementary"> with the image of the skyline on it.

Your footer is set to be 60px high, but the div inside is set at 200px high. Most browsers just show the overlapping content, but ideally you shouldn’t have a larger element inside a smaller element.

You’re basically relying on the browser to overlook the odd sizing and figure out how to display content the way it should be shown. An older browser like IE7 is a lot quirkier, and isn’t doing as good a job of compensating.

I suggest revisiting the sizes of your footer elements when you take away the padding, to avoid any future quirks in older browsers.

Hope that helps.

Pete.

Thanks very much for your reply.

Do you know why it would look fine on my machine but different on someones elses? Even though the browser is the same version?

I’m completely puzzled……….

Good question. Are you using an actual installed version of IE7, or a testing tool (either IE9 in compatibility mode or something like IETester)?

Thanks for the reply.

An installation of IE 7 on my laptop and it looks fine! My colleagues doesn’t.

Tested in browserlabs testing tools, IE7 looks fine also.

Any ideas?

Fixed!

Sorry guys, my bad.

Thanks for the quick replies

Well I did see the white space, and I was using IE9 with the Developer Tools setting the Browser Mode and Document Mode to IE7.

It’s probably a minor change between sub-versions of IE7, or something similar. That’s the wonder of compatibility in web development – unpredictability and a multitude of browser variations!

It’s little best practices techniques (such as sizing properly etc) that help prevent these things from occurring in the first place.

Glad it’s sorted for you.

Thanks Pete!

Your a star!

Sorry folks, its still not quite right:

Its the black div on this page:

https://www.wolvescityccg.nhs.uk/latest-news/

I need it to clear the page and stay at the bottom in IE7, any ideas?

Many thanks again

Even on Chrome 21.0 your footer doesn’t clear the page and stay at the bottom (zoom out to see).