WordPress.org

Ready to get started?Download WordPress

Forums

Footer won't clear main page in IE7 (11 posts)

  1. matthisco
    Member
    Posted 1 year ago #

    Hi peeps,

    Can someone please tell me how I can get the footer to remain at the bottom of the page?

    http://www.wolvescityccg.nhs.uk/index.php

    Many thanks

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Validate your website.

  3. petegale
    Member
    Posted 1 year ago #

    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.

  4. matthisco
    Member
    Posted 1 year ago #

    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..........

  5. petegale
    Member
    Posted 1 year ago #

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

  6. matthisco
    Member
    Posted 1 year ago #

    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?

  7. matthisco
    Member
    Posted 1 year ago #

    Fixed!

    Sorry guys, my bad.

    Thanks for the quick replies

  8. petegale
    Member
    Posted 1 year ago #

    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.

  9. matthisco
    Member
    Posted 1 year ago #

    Thanks Pete!

    Your a star!

  10. matthisco
    Member
    Posted 1 year ago #

    Sorry folks, its still not quite right:

    Its the black div on this page:

    http://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

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags