Here's my guess, and it is a guess, the two divs one contains the player and the other is the logo. They seem to be out of sync.
Here is just the basic divs with most things removed:
Code:
// this is the main div
<div id="header" style="border: blue solid 1px;">
// this is auto centered to display the next two divs
<div class="centre header" style="border: purple solid 1px;">
// this is the movie player it is floated right
<div id='logo2' style="border: red solid 1px;">
<object width='308' height='150'>
<param name='movie' value='header-image.swf' />
<embed src='header-image.swf' width='308' height='150'>
</object>
</div>
// this is the logo. And what I think is the problem
<div class="intro" style="border: green solid 1px;">
<img src="http://www.dbnzcoatings.co.nz/images/dbnz_logo.png" width="308" height="95" alt="Dbnz Logo" /><br /><br />
</div>
</div>
</div>
The logo comes after the player. The logo is not floated left. The logo has to be squashed to get it to appear before the player.
What I suggest is to change the css this way:
Code:
#logo2
{
float:right;
padding-bottom:5px;
}
.intro
{
float:left;
padding-top:85px;
width:550px;
}
and put the logo before the player in the html:
Code:
<div id="header">
<div class="centre header">
<div class="intro">
<img src="http://www.dbnzcoatings.co.nz/images/dbnz_logo.png" width="308" height="95" alt="Dbnz Logo" /><br /><br />
</div>
<div id='logo2'>
<object width='308' height='150'>
<param name='movie' value='header-image.swf' />
<embed src='header-image.swf' width='308' height='150'>
</object>
</div>
</div>
</div>