Question

See the jsfiddle here: http://jsfiddle.net/x7N66/3/

See the screenshot here: https://i.stack.imgur.com/dC9Gp.png

Note the white band at the top in the chromium screenshot (also visible in opera, not tried ff). That shouldn’t be there and I can’t work out why!

I cannot work out where this comes from. The dev tools in chromium don’t identify it as any part of the layout. It happens after the inclusion of the header_img div. but it shouldn’t cause a problem as all padding is set to zero

Note i do have a footer at the bottom which is suspiciously about the same height it seems.

Thanks

Answer 1

Try adding this to your CSS:

h1 { margin-top: 0; }

My guess is it’s a case of margin collapsing. If an element with top/bottom margins (h1s have default margins) is contained within an element with no padding (#header_img), the margins will be applied to that container element.