SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Southern Georgia
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 repeat-y errors

    Hello, I've designed a site that uses a css background patttern that is set to repeat-y. It looks correct in Safari, FF, PC FF, and IE 8. The container div doesn't go all the way to the bottom and I don't want it to.

    However in IE7 the container div is repeating from top to bottom of the browser window, messing up the header and the footer, instead of being contained by the div. I'm not sure what is going on.

    Here is the link to the website.
    Hands on Thomas County

    All help will be greatly appreciated.

    Thanks,
    Rick

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE7 won't accept that a bottom margin will take note of the viewport. A bottom margin only applies to an element underneath the element concerned. As there is no element under your footer then the bottom margin on the footer has nothing to push away and so has no effect.

    To make space at the bottom of the viewport simply add some padding bottom to the body element instead.

    You also need to kill the margin on the p element in the footer as that stretches the footer height in IE7 also.

    Code:
    body{padding-bottom:50px}
    #footer {margin-bottom: 0;}
    #footer p{margin:0}

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Southern Georgia
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul for the informative response.

    Is it that there is a bottom margin in the other browsers but not IE7? I noticed the CSS FAQ in your signature. I'll be scouring that today.

    Thanks.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Yes other browsers will use the margin-bottom and push the footer away from the bottom of the viewport if it is the last element. (I happen to think that IE is half right in this case as the bottom of the viewport shouldn't really enter into the equasion.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •