Layout not displaying correctly in Firefox

[Lamppost]

I'm not sure why, but my userlookup displays differently in Firefox than in Chrome. In particular, the Collections and the Habitarium modules aren't lined up correctly in FF. Any suggestions for how to fix it?

Also, I'm not sure how to get rid of all the blank space at the bottom of my layout. I put a max-height tag in for the user trophies, which has fixed the problem on previous layouts, but it didn't do anything on this one. Help please?

My code:

<style>
#footer, #ban, .sidebar, .brand-mamabar, hr, #ncmall, #userneohome, .user, #nst {
display: none;
}

body {
background: #be8cbe url('http://i.imgur.com/nMjFJPu.png') fixed bottom right repeat-x; /* #30c85d (green) or #fcea04 (gold) */
}

#header {
background: #FFFFFF url('http://i.imgur.com/GBaLAvJ.png') no-repeat;
width: 996px;
height: 1800px;
}

#main {
margin-top: 0px;
background: #FFFFFF;
border-left: 2px solid #7d417d;
border-right: 2px solid #7d417d;
}

#content {
width: 996px;
background: #FFFFFF url('http://i.imgur.com/diVidVY.png') repeat-y;
}

.content div a img, .content div b {
display: none;
}
.contentModule div a img, .contentModule div b {
display: inline;
}

#navigation { display: none; }

#my_nav
{
width: 996px;
height: 41px;
line-height: 41px;
text-align: center;
vertical-align: middle;
position: relative;
top: -1740px;
left: -8px;
}

a, a:link, a:visited {
color: #511551;
}

a:hover, a:active {
color: #be8cbe;
}

.contentModule a, .contentModule a:link, .contentModule a:visited {
color: #be8cbe !important;
}

.contentModule a:hover, .contentModule a:active {
color: #511551 !important;
}

.contentModule, .contentModule .medText, .contentModuleTable, .contentModuleContent, .contentModuleContent table {
background: transparent;
border: none;
}

.contentModule img { padding: 1px; background: #FFFFFF; border: 1px solid #000000; }

.contentModuleHeader, .contentModuleHeaderAlt {
visibility: hidden;
}
#userinfo {
position: relative;
top: -1970px;
left: 446px;
width: 456px !important;
height: 263px !important;
}
#usercollections {
width: 300px;
height: 337px !important;
position: relative;
top: -1730px;
left: -435px;
}

#usercollections img { visibility: hidden; }

#usershop {
width: 200px;
height: 270px;
position: relative;
top: -1655px;
left: -350px;
}
#userneopets {
width: 774px;
height: 260px;
position: relative;
top: -1665px;
left: 45px;
}
#userneopets img { padding: 0px; }

#habitarium {
height: 186px;
position: relative;
top: -2155px;
left: -76px;
float: right;
}
#habitarium .medText {
background: transparent url("http://i.imgur.com/7fcdCAMs.png") top center no-repeat;
}
#habitarium .medText img {
visibility: hidden;
height: 100px;
}
#usertrophies {
width: 761px;
position: relative;
top: -1625px;
left: 192px;
max-height: 200px !important;
}
#userabout {
background: transparent;
width: 278px;
height: 130px;
position: relative;
top: -1400px;
left: -295px;
padding-left: 5px;
padding-right: 5px;
overflow: auto;
text-align: left;
}

#userabout img {
display: inline !important;
}

#collection_images {
position: relative;
top: -1328px;
left: -295px;
width: 300px;
height: 337px !important;
}

#themed_av {
position: relative;
top: -1630px;
left: -375px;
}

.mycenter {
text-align: center;
margin-left: auto;
margin-right: auto;
}

/* Box color: #7d417d;
/* Neopoint Foreground: https://images.neopets.com/cp/items/swf/000/000/104/104235_f9c51f8aa9.swf */
</style>

<div id="my_nav">
<a href="/myaccount.phtml">account</a> |
<a href="/customise/">customise</a> |
<a href="/games/">games</a> |
<a href="/explore.phtml">explore</a> |
<a href="/nf.phmtl">news</a> |
<a href="/community/index.phtml">community</a> |
<a href="/objects.phtml">shops</a> |
<a href="/mall/index.phtml">nc mall</a>
</div>

<div id="userabout">
<p class="mycenter">Visit my portfolio to learn more about me!</p>
<p class="mycenter"><a href="/~Mina1021"><img src="http://i.imgur.com/VkOEFm9.png"></a></p>
</div>

<div id="collection_images">
<img src="http://i.imgur.com/2xIH89r.png">
</div>

<div id="themed_av">
<img src="https://images.neopets.com/neoboards/avatars/htricher.gif">
</div>

 

 

This topic has been edited by a member of staff (Anime).
The topic was posted in the wrong area.
Please check your user inbox to see if you have been contacted regarding this topic.
Per the reason above, this topic has been MOVED from Graphics Help to Computers & Programming.

[jcpet]

I'm not sure about the Firefox issue, but there's extra space at the bottom because the space is actually being taken up by the original tables in the userlookup layout. What happened is that you put your main userlookup background in the header div, and the image ended up pushing all the tables to the bottom. This is also the reason why you had to keep using "top: -xxxx" to push all the content so far up.

 

Instead of putting the background image in the header, you should just create a div for the background image and position it absolutely so it's "top: 0; left: 0". You'd have to adjust the position of the content all over again, but that would probably fix the extra space issue...