Cannot work out how to remove gap at top of page

Hi,

I updated this site today:
Violins, cellos, violas and double bass - violinandviola - string resources for all

By changing from this:

	<div id="title">
		<h1><a href="http://www.violinandviola.co.uk/">Violinandviola</a></h1>
		<span class="sub">String Resources for all</span>
	</div>

To this:

	<table id="title" style="width:100%;"> 
		<tr> 
			<td style="background:transparent; border:0px; width:530px;"> 
				<h1><a href="http://www.violinandviola.co.uk/">Violinandviola</a></h1> 
				<span class="sub">String Resources for all</span>				
			</td> 
			<td style="background:transparent; border:0px;"> 
				<object width="245" height="90"> 
					<param name="allowscriptaccess" value="always" /> 
					<param name="movie" value="http://www.radionomy.com/Flash/BannerEmbed.swf?RadUID=b60ec922-8189-41c0-b787-0ad10cb3ddbb&amp;titlesColor=7D7D7D&amp;color=FFFFFF&amp;autoPlay=no&amp;lang=en" /> 
					<param name="wmode" value="transparent" /><embed src="http://www.radionomy.com/Flash/BannerEmbed.swf?RadUID=b60ec922-8189-41c0-b787-0ad10cb3ddbb&amp;titlesColor=7D7D7D&amp;color=FFFFFF&amp;autoPlay=no&amp;lang=en" wmode="transparent" type="application/x-shockwave-flash" allowscriptaccess="always" width="245" height="90"></embed> 
				</object> 
			</td> 
		</tr> 
	</table> 

When I did, a gap appeared at the top of the page, below the top white border, and above the violin image in the header.

I found it’s to do with the table HTML, even with the most basic table HTML the gap appears:

		<table>
		<tr>
			<td>
				<p>test</p>
			</td>
		</tr>
	</table>

It appears in Chrome and IE, but not in Firefox, though in firefox the white border at the top of the page is twice as thick as it should be.

I can’t work out why!

Any advice much appreciated.

Thanks!

Going back to a table layout like that is a terribly retrograde step. :frowning: Anyhow, remove the line in red to eliminate the problem:

table {
  margin-bottom: 10px;
  [COLOR="Red"]margin-top: 10px;[/COLOR]
}