Alright, I'm working on a div overlay myspace layout for a friend.
It's looking ok in Internet Explorer...there's just one gap.
It's looking horrible in FireFox...
there's a lot of gaps...
and bottoms of things missing?
The example is www.flamehtmlstudios.com/myspace/louis/

The code is:

HTML Code:
<style type="text/css">

body{
background: white;
font-family: Georgia, arial, Times, serif;
font-size: 11pt;}

a img{
border-width: 0px;}

.preload{
display: none;
visibility: hidden;
width: 1px;
height: 1px;}

.hide{
display: none;
visibility: hidden;
font-size: 1px;
color: white;}

div{
background: white;}

table{
display: none;
border-width: 0px;
background: white;
color: white;
border-color: white;}
/* Hide MySpace Table */

td{
vertical-align: top;}

.main-container table{
display: inline;
color: black;}
/* Show Div Overlay Table */

.nav{
width: auto;
height: auto;
background: white;}

	.nav a:link, .nav a:active, .nav a:visited{
	color: black;}
	
	.nav a:hover{
	text-decoration: none;
	color: 444444;}
	
.main-container{
width: 634px;
height: 844px;
background: white;}

.top{
width: 634px;
height: 27px;
background: white url(top.gif) no-repeat;}

.firsthalf{
width: 634px;
height: auto;
background: white;}

	.first-col1{
	width: 195px;
	height: auto;
	background: white;}
	
		.pic{
		width: 195px;
		height: 118px;
		background: white url(pic1.gif) no-repeat;}
		
			.pic img{
			width: 195px;
			height: 118px;
			display: block;}
			
		.picvid{
		width: 195px;
		height: 39px;
		background: white;}
		
		.picvid a, .picvid img{
		display: block;}
		
			.picside, .pics, .vids, .vidside{
			float: left;
			height: 39px;}
			
				.picside{
				width: 46px;
				background: white url(picside.gif) no-repeat;}
				
				.pics{
				width: 67px;
				background: white url(pic2.jpg) no-repeat;}
					
					.pics img{
					width: 67px;
					height: 39px;}
				
				.vids{
				width: 75px;
				background: white url(vids.gif) no-repeat;}
				
					.vids img{
					width: 75px;
					height: 39px;}
				
				.vidside{
				width: 7px;
				background: white url(vidside.jpg) no-repeat;}
				
		.contact{
		width: 195px;
		height: auto;
		background: white;}
		
			.contact-title{
			width: 195px;
			height: 54px;
			background: white url(contact.gif) no-repeat;}
			
			.add a, .msg a, .cmt a{
			display: block;
			width: 195px;}
			
			.add, .msg, .cmt, .add img, .msg img, .cmt img{
			width: 195px;}
			
			.add, .add a, .add img{
			height: 73px;}
			
				.add a:link, .add a:active, .add a:visited{
				background: white url(add.jpg) no-repeat;}
				
				.add a:hover{
				background: white url(add-hover.jpg) no-repeat;}
				
			.msg, .msg a, .msg img{
			height: 72px;}
			
				.msg a:link, .msg a:active, .msg a:visited{
				background: white url(msg.jpg) no-repeat;}
				
				.msg a:hover{
				background: white url(msg-hover.jpg) no-repeat;}
				
			.cmt, .cmt a, .cmt img{
			height: 84px;}
			
				.cmt a:link, .cmt a:active, .cmt a:visited{
				background: white url(cmt.jpg) no-repeat;}
				
				.cmt a:hover{
				background: white url(cmt-hover.jpg) no-repeat;}
				
	.first-col2{
	width: 439px;
	height: auto;}
	
		.head{
		width: 439px;
		height: 118px;
		background: white url(head.jpg) no-repeat top left;}
		
		.headbot{
		width: 439px;
		height: 39px;
		background: white url(headbot.jpg) no-repeat top left;}
		
		.aboutme{
		width: 439px;
		height: auto;}
		
			.aboutme-title{
			width: 439px;
			height: 54px;
			background: white url(about.jpg) no-repeat top left;}
			
			.about{
			width: 439px;
			height: 229px;
			background: white url(aboutbg.jpg) no-repeat top left;}
			
.secondhalf{
width: 634px;
height: auto;
background: white;}
			
		.second-col1{
		width: 165px;
		height: auto;}
		
			.other-title{
			width: 165px;
			height: 82px;
			background: white url(other.gif) no-repeat;}
			
			.other{
			width: 165px;
			height: 168px;
			background: white url(otherbg.gif) repeat-y left;}
			
			.otherbot{
			width: 165px;
			height: 10px;
			background: white url(otherbot.gif) no-repeat;}
			
		.second-col2{
		width: 190px;
		height: auto;}
		
			.music-title{
			width: 190px;
			height: 82px;
			background: white url(music.gif) no-repeat;}
			
			.music{
			width: 190px;
			height: 168px;
			background: white url(musicbg.jpg) no-repeat;}
			
			.musicbot{
			width: 190px;
			height: 10px;
			background: white url(musicbot.gif) no-repeat;}
			
		.second-col3{
		width: 279px;
		height: auto;}
		
			.friends-title{
			width: 279px;
			height: 82px;
			background: white url(friends.gif) no-repeat left;}
			
			.friends{
			width: 279px;
			height: 168px;
			background: white url(friendsbg.jpg) no-repeat left;}
			
			.friendsbot{
			width: 279px;
			height: 10px;
			background: white url(friendsbot.gif) no-repeat left;}
			
	.bottomhalf{
	width: 634px;
	height: 104px;}
	
		.aj, .aj img, .aj a{
		width: 165px;
		height: 104px;}
		
		.aj a{
		display: block;}
		
			.aj a:link, .aj a:active, .aj a:visited{
			background: white url(aj.jpg) no-repeat;}
			
			.aj a:hover{
			background: white url(aj-hover.jpg) no-repeat;}
			
		.c{
		width: 379px;
		height: 104px;
		background: white url(c.jpg) no-repeat;}
		
		.botright{
		width: 90px;
		height: 104px;
		background: white url(botright.gif) no-repeat left;}
		
	.bottom{
	width: 634px;
	height: 13px;
	background: white url(bot.gif) no-repeat top right;}
	




</style>

<div class="div1">

<div class="PRELOAD-IMAGES">
	<img src="add-hover.jpg" alt="" class="preload" />
	<img src="msg-hover.jpg" alt="" class="preload" />
	<img src="cmt-hover.jpg" alt="" class="preload" />
	<img src="aj-hover.jpg" alt="" class="preload" />
</div>



<div class="nav"></div>




<div class="main-container">
	<div class="top"></div>
<div class="firsthalf">
<table cellpadding="0px" cellspacing="0px">
<tr>
<td>
<div class="first-col1">
	<div class="pic">

		<a href="#"><img src="space.gif" alt="" /></a>
	</div>
	<div class="picvid">
		<div class="picside"></div>
		<div class="pics">
			<a href="#"><img src="space.gif" alt="" /></a>
		</div>
		<div class="vids">
			<a href="#"><img src="space.gif" alt="" /></a>

		</div>
		<div class="vidside"></div>
	</div>
	<div class="contact">
		<div class="contact-title"></div>
		<div class="add">
			<a href="#"><img src="space.gif" alt="" /></a>
		</div>
		<div class="msg">

			<a href="#"><img src="space.gif" alt="" /></a>
		</div>
		<div class="cmt">
			<a href="#"><img src="space.gif" alt="" /></a>
		</div>
	</div>
</div>
</td>
<td>
<div class="first-col2">
	<div class="head"></div>

	<div class="headbot"></div>
	<div class="aboutme">
		<div class="aboutme-title"></div>
		<div class="about">
		About me here
		</div>
	</div>
</div>
</td>
</tr>
</table>

</div>


<div class="secondhalf">
<table cellpadding="0px" cellspacing="0px">
<tr>
<td>
<div class="second-col1">
	<div class="other-title"></div>
	<div class="other">
	Other stuff here
	</div>
	<div class="otherbot"></div>

</div>
</td>
<td>
<div class="second-col2">
	<div class="music-title"></div>
	<div class="music">
	Music here
	</div>
	<div class="musicbot"></div>
</div>
</td>
<td>
<div class="second-col3">

	<div class="friends-title"></div>
	<div class="friends">
	Friends go here
	</div>
	<div class="friendsbot"></div>
</div>
</td>
</tr>
</table>
</div>



<div class="bottomhalf">
<table cellpadding="0px" cellspacing="0px">
<tr>
<td>
<div class="aj">
	<a href="#"><img src="space.gif" alt="" /></a>
</div>
</td>
<td>
<div class="c"></div>
</td>
<td>
<div class="botright"></div>
</td>
</tr>
</table>

</div>

<div class="bottom"></div>

</div>

HELP!
thanks