Happening in all but IE. I have a 1px wide image repeating across the html element, and a large background image positioned '0 center' on the body element.

But when applying the html background it knocks the background on the body element down by about 10 pixels for some reason! I've been sure to reset margins and paddings but to no avail.

Does anyone know how I can fix it?

Edit: if I add a border to the body it fixes the padding issue!? But I don't want a border

* {
    margin:0;
    padding:0;
    outline:none;
    border:none;
}

html {
    background:url(image/html.gif) repeat-x;
}

body {
    background:url(image/body.jpg) no-repeat center 0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#545454;
    margin-top:0;
}

http://www.howtocreate.co.uk/tutoria...rgincollapsing

Ahhhh of course! I run into this so rarely I normally forget about margin collapse. I tend to fix it with a bit of 1px top padding

Thanks.