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