So I have a website. I have set a larger image as a background:
html, body {
height: 100%;
}
body {
color: #000;
font: 100.1% sans-serif;
background: #033361 url('/images/background2.jpg') center top no-repeat;
}
It works great in Firefox and IE8 but in IE7 the background is moved to the right and there is a horizontal scrollbar.
Can anyone explain this odd behaviour to me and suggest a solution?
My doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
UPDATE:
It seems the problem is caused by my wrapper div:
#wrapper {
width: 1002px;
margin: 0 auto;
font-size: .8em;
}
If I comment out the margin, the body background is centered correctly.