Forum Moderators: not2easy
it's something to do with the height of the body element, as in the <body> element is not automatically 100% of the viewport. ( <html> is the root element in strict mode )
So I added a background color to the <html> element to see where the two elements where in relation to each other.. that triggered the described Opera behaviour in IE and totally blanked out the <body> element in FF/Opera (proving the body element has no height, until content is added of course..)
IE gives every empty element a minimum height (approx 16px), so that's why it shows a bit in there.. LOL
then I expected to have to add 100% heights to html and body, so the body would inherit the height, which worked... but would cut off after the page got longer than 100%..
but it also worked by only adding a height to the HTML element when the <html> background was removed.. weird.. it's like if there's no background on HTML then the <body> takes over height an' all, otherwise the <html> background trumps it?
can't get my head around it all, but min-height seems to be the answer, the CSS below seems to work best crossbrowser, and I tested with lots of content to make sure the body did not cut off.. IE must be doing it's own thing again...
html {
margin: 0; padding: 0;
/* background: #000; */
min-height: 100%;
}body {
margin: 0; padding: 0;
background: #ccc url(hello.gif) no-repeat 50% 50%;
}
what am I not seeing?
Suzy
