Bottoms Missing and Gaps?!

[alexjewell]

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:



<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