IE7 repeat-y errors

[rick yentzer]

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

[Paul O'B]

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.

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

[rick yentzer]

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.

[Paul O'B]

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