Moving from Tables to Pure CSS - Lil Help?

ok, I can get it this far, but I need to sleep now, I get up in 6 hours.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--link href="style.css" rel="stylesheet" type="text/css" /-->
<style type="text/css">	<!--
	body {
		margin: 0;
		padding: 0;
		font-family: Verdana, sans-serif;
		font-size: small;
		background: #FFFFFF;
	}

	#container {
		width: 650px;
		margin: 0 auto;
		border: none;
		background: #FFFFFF;
	}

	#menu-container{
		position:relative;
		display:block;
		min-height:200px;
	}

	#logo_t1 {
	}
	#nav {
		position:absolute;
		top:125px;
	}
	#nav ul {
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		list-style: none;
		height: 30px;
	}


	#nav li {
		float: left;
		margin: 0;
		padding: 0;
		width:130px;
		list-style: none;
		position: relative;
		display: inline;
		text-align:center;
		color: #FFFFFF;
		font-weight: bold;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px;
		text-align: center;
		background-image: url("images/bluemenubg_off.gif");
	}

	#nav li:hover{
		background-image: url("images/bluemenubg_on.gif");
	}

	#logo {
		background-image: url("images/logo.gif");
		position:absolute;
		width:600px;
		height:100px;
		left:25px;
		top:25px;
		display:block;

	}

	#top_shadow{
		background: #00ff00 url("images/shadow_top.gif") repeat-x top left;
		position: absolute;
		width: 600px;
		height: 25px;
		left:25px;
		display: block;
		padding: 0;
		margin: 0;
	}

	#topleft_shadow{
		background: #00ff00 url("images/shadow_topleft.gif") repeat-x top left;
		position:absolute;
		width:25px;
		height:25px;
		display:block;
	}

	#topright_shadow{
		background: #00ff00 url("images/shadow_topright.gif") repeat-x top right;
		left:625px;
		position:absolute;
		width:25px;
		height:25px;
		display:block;
	}
	#left_shadow{
		background: url("images/bg.gif") repeat-y left;
		position:absolute;
		top:25px;
		width:25px;
		height:100px;
		display:block;
	}
	#right_shadow{
		background: url("images/bg.gif") repeat-y right;
		position:absolute;
		left:625px;
		top:25px;
		width:25px;
		height:100px;
		display:block;
	}
	

	#bottomleft_shadow{
		background: #00ff00 url("images/shadow_bottomleft.gif") repeat-x bottom left;
		position:relative;
		width:25px;
		height:25px;
		padding:0;
		margin:0;
		float:left;
		display:block;
	}
	
	#bottom_shadow{
		background: #00ff00 url("images/shadow_bottom.gif") repeat-x bottom;
		position:relative;
		width: 600px;
		height: 25px;
		padding:0;
		margin:0;
		float:left;
		display:block;
	}


	#bottomright_shadow{
		background: #00ff00 url("images/shadow_bottomright.gif") repeat-x bottom right;
		position:relative;
		width:25px;
		height:25px;
		padding:0;
		margin:0;
		float:left;
		display:block;
	}
	-->
</style>
</head>

<body>

<div id="container">
	<div id="menu-container">
	
		<div id="topleft_shadow"></div>
		<div id="top_shadow"></div>
		<div id="topright_shadow"></div>
		<div id="left_shadow"></div>
		<div id="logo"></div>
		<div id="right_shadow"></div>
		
		<div id="nav">
				<ul id="topmenu">
					<li class="topmenuitem">Home</li>
					<li class="topmenuitem">Info</li>
					<li class="topmenuitem">Download</li>
					<li class="topmenuitem">Purchase</li>
					<li class="topmenuitem">Support</li>
				</ul>
		</div>


	</div>
	<div id="maincontent">

		This is some content<br />
		<br />
		<br />
		<br />
		<br />
		gdfsgfdgf d<br />
		<br />
		<br />
		<br />
		<br />
		gfdgfdgfd<br />
		<br />
		<br />
		<br />
		gfdgfd
	</div>
		<div id="bottomleft_shadow"></div>
		<div id="bottom_shadow"></div>
		<div id="bottomright_shadow"></div>
</div>

</body>
</html>

a tip, develop in firefox, fix for IE.