Header blijft staan, maar overlapt een ander stuk

<div id="header">
	<table border="0" cellspacing="1">
	<tr>
	<td>
	<?logo();?>
	</td>
	<td>
		<div id="menu">
			<ul>
				<center>
					<li class="active">
					<a href="#content-index">Home</a>
					</li>
					<li>
					<a href="#content-gastenboek">Gastenboek</a>
					</li>
					<li>
					<a href="#content-geschiedenis">Geschiedenis</a>
					</li>
					<li>
					<a href="#content-contact">Contact</a>
					</li>
				</center>
			</ul>
		</div>
	</td>
	<td width="175px">
	<div id="language">
		<ul>
			<li>	
			<img src="img/nederlan.gif" height="15" width="20"> <a href="">Nederlands</a>
			</li>
			<li>
			<img src="img/frans.gif" height="15" width="20"> <a href="">Frans</a>
			</li>
		</ul>
	</div>
	</td>
	</tr>
	</table>
</div>

html, body {
	font-family: 'Aladin', Arial, Helvetica, sans-serif; 
	padding: 0px; 
	margin: 0px; 
	background-color: #8a8a8a;
}

/*start-header*/


#header{
	display: block;
	height: 150px;
	width: 100%;
	background-color: #848484;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
}

table{
	padding: 75px auto;
}

#logo{
	float: left;
	margin: 10px;
	padding-top:20px;
}
#menu{
	/*width:940px;*/
	width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-top:auto;
	margin-bottom:-10px;
	text-align:center;
	float: right;
}

#menu ul{
	margin-left:7px;
}

#menu ul li{
	display:inline;
	padding-left: 7px;
	padding-right: 7px;
}

#menu ul li a{
	color:#FFFFFF;
	text-decoration:none;
	font-size:25px;
	font-weight:bold;
}

#menu ul li a:hover{
	color:#000000;
	text-decoration:none;
	font-size:27px;
	font-weight:bold;
}
#menu li.active a{
	color: #000000;
	text-decoration: none;
	font-size:27px;
}
#language{
	margin: 5px;
}
#language ul li{
	display:inline;
	padding-left: 5px;
	padding-right: 5px;
}
#language ul li a{
	color:#FFFFFF;
	text-decoration:none;
	font-size:18px;
	font-weight:bold;
}

#language ul li a:hover{
	color:#000000;
	text-decoration:none;
	font-size:19px;
	font-weight:bold;
}

/*Einde-header*/