Once more I find myself posting in here after pulling out all of my hair ...

I want to move the logo in the top left hand side down 6px ... http://www.dtcommercials.com

HTML is:
HTML Code:
<div id="top">
	<div id="logo">
</div>
</div>
and CSS is:
Code:
#top {
margin-top: 10px;
margin-right: 20px;
margin-left: 20px;
background: #E8E8E8;
height: 100px;
}

#logo {
margin-top: 6px;
margin-left: 50px;
margin-bottom: 0px;
background-position: left top;
background-image: url(../images/logo.gif);
padding-bottom: 0px;
background-repeat: no-repeat;
height: 100px; /*Set height of text box */
}
I've put a border round it so as to demonstrate what I mean ...

If you look at the site in IE its grand ... however firefox doesnt move it down at all ... if for testing purposes I set the margin-top to be 50px, in firefox it moves my logo and grey border 50px down from the top of the screen ...

Any ideas ...

regards,

Ronan