User Lookup Help? Browser Compatibility

[pokeneodragon]

I’m working/was working on a user look up for my new side account haunted_realm. Once I was done I decided to have a look at my side from my main and lo and behold my look up was messed up. I opened up Chrome and everything was fine there but in Firefox, #userinfo, #usertrophies and #user collections are all the way to the left side of the screen. I opened up IE next and still problems only different. In IE, #userinfo and #userneohome are stretched vertically and I don’t know why. I’ve been racking my brain for an answer and I can’t figure out what to do. For Firefox I know that I have it set to be 7px from the left but, that only makes it 7px from the left within the main inner background in Chrome.

 

My code:

<style>
#header {
    background-image: url("http://i1178.photobucket.com/albums/x369/KMGsNeopetsScreenshots/HauntedRealmHeader11.png");
    background-repeat: no-repeat;
    height: 400px;
    width: 996px;
}
body {
    background-image: url("http://i1178.photobucket.com/albums/x369/KMGsNeopetsScreenshots/SpookyBG3.gif");
    background-repeat: repeat;
}
#main {
    background-color: #8F968A;
    height: 1125px;
}
#footer {
    display: none;
}
hr {
    display: none;
}
.contentModuleContent table table {
    border: none !important;
}
.contentModule {
    border: none;
}
#ncmall {
    display: none;
}
.contentModule, .contentModuleTable {
    border: none;
}
.contentModuleHeaderAlt, .contentModuleHeader {
    font: 20px Century Gothic;
    color: #8F968A;
    background: black;
}
.contentModuleContent {
    background-color: #A19589;
}
.content div b, .content div a img {
    display: none;
}
.contentModule div a img, .contentModule div b {
    display: inline;
}
#template_nav {
    margin-left: 0px;
    margin-top: 325px;
}
ul.dropdown {
    border: 1px solid #402357;
    background-color: #A6998D;
}
#nst {
    display: none;
}
#userinfo .contentModuleTable {
    position: absolute;
    top: 790px;
    left: 7px;
    width: 300px;
    height: 323px;
}
#usercollections .contentModuleTable {
    position: absolute;
    top: 790px;
    left: 689px;
    width: 300px;
    height: 214px;
}
#userneohome .contentModuleTable {
    position: absolute;
    width: 200px;
    height: 246px;
}
#usertrophies {
    position: absolute;
    top: 790px;
    left: 307px;
    width: 383px;
    height: 322px !important;
    overflow: auto;
}
#header .medText, #header .medText a {
    font: 12px sans-serif;
    color: #8F968A;
}
a:link, a:active, a:visited {
    color: #504A5C;
    font-size: 9pt;
    text-decoration: none;
}
a:hover {
    color: #FFFFFF;
    font-size: 9pt;
    text-decoration: underline;
}
#ban_bottom, #ban, .slug {
    display: none;
}
#main {
    margin-top: 0px;
}
</style>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="contentModule">
<tr valign="top"><td class="contentModuleHeader">Main And Other Sides</td></tr>
<tr><td class="contentModuleContent" height="100%"><div align="left" style="padding: 3px;"><center>

<a href="http://www.neopets.com/userlookup.phtml?user=kiara_maliks_girl">
<img src="https://images.neopets.com/neoboards/avatars/pooralbert.gif"></a>


<a href="http://www.neopets.com/userlookup.phtml?user=freeze_pride">
<img src="https://images.neopets.com/neoboards/avatars/icehissi.gif"></a> </center></div></td></tr>
</table>
 

I'm hoping some of the lovely coders on TDN could help me with this little problem.

 

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.

[Mouseykins]

I would highly suggest using the attribute position: relative instead of absolute. That should fix your issues. :)

[pokeneodragon]

Thanks so much! That fixed things in Firefox but IE is still giving me trouble.

[Mouseykins]

Can you screenie how it's supposed to look and how it's going all wonky on you in IE? I might be able to help better if I can see it visually.

[pokeneodragon]

Here is what it’s supposed to look like in Chrome but here is how the modules mess up in IE. Another thing I noticed in Chrome was that if I zoom out the modules would bunch together in the same way that they're bunched up in IE. I don't know if that helps or not.