weird page rendering

this code:

<html>
<head>
<script>
function loader()
{
document.getElementById('frame1').style.display = 'block';
document.getElementById('frame2').style.display = 'none';
document.getElementById('frame3').style.display = 'none';
}
function swich($name)
{
	document.getElementById('frame1').style.display = 'none';
	document.getElementById('frame2').style.display = 'none';
	document.getElementById('frame3').style.display = 'none';
	document.getElementById($name).style.display = 'block';
}
</script>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Ancient Stormrage Recovery Pages</title>
<meta charset="utf-8">
</head>
	<body onLoad="loader()">
		<table class="maintable">
			<tbody>
			<tr id="headerrow">
				<div id="logo">
					<img src="logo.gif" name="logo" width="315" height="56" id="logo"></img>
				</div>
	  			<div id='playerrecovbtn' onClick="swich('frame1')">
					Player Recovery
				</div>
				<div id='regionrecovbtn' onClick="swich('frame2')">
					Region Recovery
				</div>
				<div id='logbtn' onClick="swich('frame3')">
					Crash logs
				</div>
			</tr>
			<tr>
				<iframe  name="frame1" id="frame1" src="recover-player.php"></iframe>
				<iframe  name="frame2" id="frame2" src="recover-region.php"></iframe>
				<iframe  name="frame3" id="frame3" src="crash-logs.php"></iframe>
			</tr>
			</tbody>
		</table>
	</body>
</html>

comes out as:
<html><head>
<script>
function loader()
{
document.getElementById('frame1').style.display = 'block';
document.getElementById('frame2').style.display = 'none';
document.getElementById('frame3').style.display = 'none';
}
function swich($name)
{
	document.getElementById('frame1').style.display = 'none';
	document.getElementById('frame2').style.display = 'none';
	document.getElementById('frame3').style.display = 'none';
	document.getElementById($name).style.display = 'block';
}
</script>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Ancient Stormrage Recovery Pages</title>
<meta charset="utf-8">
<style type="text/css"></style></head>
	<body onload="loader()">
  <div id="logo">
					<img src="logo.gif" name="logo" width="315" height="56" id="logo">
				</div><div id="playerrecovbtn" onclick="swich('frame1')">
					Player Recovery
				</div><div id="regionrecovbtn" onclick="swich('frame2')">
					Region Recovery
				</div><div id="logbtn" onclick="swich('frame3')">
					Crash logs
				</div><iframe name="frame1" id="frame1" src="recover-player.php" style="display: block;"></iframe><iframe name="frame2" id="frame2" src="recover-region.php" style="display: none;"></iframe><iframe name="frame3" id="frame3" src="crash-logs.php" style="display: none;"></iframe><table class="maintable">
			<tbody>
			<tr id="headerrow">


			</tr>
			<tr>


			</tr>
			</tbody>
		</table>
</body></html>