I think it's the element

<div id="header">

that's causing the problem, notice how in IE8 (only!) that the height of it seems to be doubled, and the background is repeated, even though I've specifically said in the stylesheet not to repeat the background

http://bit.ly/60dd4O

I have a feeling that the problem will be in here somewhere:

<div id="header">
<a id="page-top">        </a><a id="logo" href="http://www.mattpealingdesign.co.uk/-mattpealing.co.uk" bitly="BITLY_PROCESSED"><img src="http://www.mattpealingdesign.co.uk/-mattpealing.co.uk/wp-content/themes/mattpealing/image/logo.gif" alt="Matt Pealing Logo"/></a>
        <a id="creative-output" href="http://www.mattpealingdesign.co.uk/-mattpealing.co.uk/wp-login.php" bitly="BITLY_PROCESSED"><img src="http://www.mattpealingdesign.co.uk/-mattpealing.co.uk/wp-content/themes/mattpealing/image/creative-output.gif" alt="Creative Output Version 4.0"/></a>
    </div>

and...

#wrapper {
    width:970px;
    margin:0 auto 40px;
    overflow:auto;
    background:url(image/wrapper-mid.jpg) no-repeat center 190px;
}

#header {
    height:190px;
    position:relative;
    background:url(image/header.jpg) no-repeat;
}

#header #logo {
    position:absolute;
    bottom:120px;
    left:30px;
}

#header #creative-output {
    position:absolute;
    right:30px;
    top:30px;
}

I've been looking at the code and tweaking it for ages but nothing makes any difference! If anyone could help that would be great.

Thanks.

Actually I've realised it's

'<a id="page-top" />'

at the top of the body section.

I've tried altering the height, float and display properties but nothing seems to fix it??

'<a id="page-top" />'

anchors are NOT self closing elements so the entire page is wrapped in the anchor.

AND named anchors are not really necessary any more.

You can use an element's ID as the document fragment marker

I see! Thanks for the tip