DIV positioning fine in Firefox but out of place in IE

[TheCeej]

I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm pretty sure I know what the problem is already. I just don't know how to fix it. I'd be very grateful of any help. I'll post what I'm trying to do, what keeps happening, what I believe the problem is, the link to my page and the css, and things that I have already tried:

What I'm trying to do:
Basically, I'm trying to lower all the tables in Myspace and place my own DIVs in the new leftover space above them.

What keeps happening:
In Firefox, everything is perfect so far. In IE, however, my DIVs are way out of place from the top.

What I believe the problem is:
Well, after countless hours of looking into this, it seems IE is treating my created DIVs as though they are one of the Myspace tables, and is lowering their position on the page as well. The horizontal positioning from the left seems okay, though. See for yourself in both browsers:

http://www.myspace.com/theceejus (links don't seem to be working with this site)

The CSS (what I think the problem is in bold)

<style type="text/css">
.extras1 { background-image:url("http://s9.imagehosting.us/uploadpoint/imagehosting_upload_storage/nouser_1636/T0_-1_1636270.gif");  
border:5px solid; border-color:000000;
width:700px; height:366px;
position:absolute; z-index:2; left:156; top:142; !important;}
 
.extras2 {
background-image:url("http://img101.imageshack.us/img101/1681/ceejsigek6.jpg");  
border:5px solid; border-color:000000;
width:350px; height:250px;
position:absolute; z-index:2; left:156; top:535; !important;}
 
.extras3 {
background-image:url("http://img47.imageshack.us/img47/2029/cjwelcomeve9.gif");  
border:5px solid; border-color:000000;
width:350px; height:250px;
position:absolute; z-index:2; left:506; top:535; !important;}
 
.extras4 {
background-color:transparent;
border:1px solid; border-color:000000;
width:274px; height:146px;
z-index:3; left:546; top:600;
position:absolute; text-align:justify; !important;}
 
.mygen { Background Properties }
table, tr, td { background-color:transparent; border:none; border-width:0;}
 
body {
    background-image: url('http://img220.imageshack.us/img220/233/ceejsidezn1.gif');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center left;}
span.blacktext12 {
 scrollbar-face-color:FFFFFF;
 scrollbar-highlight-color:FFFFFF;
 scrollbar-3dlight-color:000000;
 scrollbar-shadow-color:FFFFFF;
 scrollbar-darkshadow-color:000000;
 scrollbar-arrow-color:FFFFFF;
 scrollbar-track-color:FFFFFF;
  }
 
.mygen { Table Properties }
table table table table {border:0px;}
td.text table, td.text table td {width:400px; padding:0px;}
td.text table table table table, 
td.text table table table table td {width:0px;}
 table table {position:relative; bottom: -654px;}
table table table {position:static;}
table table { border: 0px }
table table table table{border:0px}
table table td.text table td.text table table {background-color:transparent;}
table table table {
 border-style:solid;
 border-width:5px;
 border-color:000000;
 background-image:url('http://img119.imageshack.us/img119/8806/grid2ju3.gif');
 background-repeat: repeat;
 background-attachment: fixed
      }
 
.mygen { Text Properties }
table, tr, td, li, p, div { font-family:tahoma; color:000000; font-size:9px;     } 
.btext { font-family:arial; color:000000;  text-decoration:overline;      } 
.blacktext10 { font-family:courier new; color:CCCCCC;      } 
.blacktext12 {   font-size:0px;     } 
.lightbluetext8 { font-family:impact; color:000000; font-size:10px; font-weight:normal; border:1px solid;     } 
.orangetext15 { font-family:tahoma; color:CC4422; font-size:10px;     } 
.redtext { font-family:verdana; color:CC8822; font-size:12px; font-weight:bold;     } 
.redbtext { font-family:verdana; color:CC8822; font-size:12px; font-weight:bold;     } 
.text { font-family:courier new; color:AAAAAA; font-size:12px;     } 
.whitetext12 { font-family:tahoma; color:CC4422; font-size:10px;     } 
a:active, a:visited, a:link { font-family:tahoma; color:CC8822; font-size:9px; font-weight:normal; text-decoration:underline;     } 
a:hover { font-family:tahoma; color:CC8822; font-size:9px;     } 
a.navbar:active, a.navbar:visited, a.navbar:link { font-family:tahoma; color:000000; font-size:9px;     } 
a.navbar:hover { font-family:tahoma; color:FFFFFF; font-size:9px;     } 
a.redlink:active, a.redlink:visited, a.redlink:link { font-family:tahoma; color:CC8822; font-size:9px; font-weight:normal; text-decoration:underline;     } 
a.redlink:hover { font-family:tahoma; color:CC8822; font-size:9px; font-weight:normal; text-decoration:underline;     } 
.nametext { font-family:verdana; color:EECC22;      } 
 
.mygen { Miscellaneous Properties }
a:hover img { filter:Blur(Add = 0,  Direction = 225,  Strength = 10);}
tr {background:transparent;}
body table div font a, body table div div {visbility:hidden;}
body table table div font a, body table table div div {visibility:visible;}
</style>
 
<style type="text/css">
table table table td {vertical-align:top;}
span.blacktext12 {
background-color:transparent;
background-image:url("http://img215.imageshack.us/img215/1360/myspacebanner4cf0.gif");
background-position:center center;
font-size:0px; letter-spacing:-0.5px;
width:400px; height:100px; display:block; }
</style>
 
<style>
.{hiding the bottom links}
table tr td div div {visibility:hidden;border:0px!important;background-color:transparent;}
</style>
 
<style>
.a {hide copyright}
table div font {visibility:hidden;}
table table div font {visibility:visible;}
</style>
 
<style>body div table tbody tr td font {visibility:hidden;}
.navbar {visibility:visible;}
.navbar font {visibility:hidden;}</style>
 
<style>body div table tbody tr td font {position:absolute; top:120px;
left:50%;
margin-left:-318px;
z-index:9}
.navbar {visibility:visible;}
.navbar font {visibility:hidden;}</style>
 
<style>
table table td {width:10px;}
div table table td, table table table td {width:auto;}
table table img {display:none;}
table table table img {display:inline;}
td.text td.text table table div,
</style>
 
<style>
div table table a.navbar {visibility:visible; !important;}
</style>
 
<div class="extras1">
</div>
 
<div class="extras2">
</div>
 
<div class="extras3">
</div>

Is there an extra tag I can add in there to make IE keep the positioning the way I set it to, or is there no possible solution to this mess?

Other things I have tried
- Setting a doctype. Basically, you can't. You have to work with what myspace gives you, which is basically no doctype.
- Setting the repositioning of the tables to absolute instead of relative. Setting it to anything else but relative messes the positioning up even more.
- Leaving out a position. That screwed up my positioning more than just about anything I tried.
- Putting the position tag inside the DIV itself rather than in the CSS styles. That basically didn't do anything. It had the same effect.
- Setting the left tag to 50% and the top tag to 0%, then using margin-top and margin-left to position it from there. That still didn't fix my IE problem, not to mention the effect was still no different.
- I can't position them as plain images because I plan on putting text over the one that says "Welcome", which will be the extras4 div that I decided not to show just yet.
- Placing an "!important;" tag inside the tags. That did absolutely nothing.
- Using javascript to fix the problem. You can't. Myspace filters it.

With that said, I know for a fact the solution to this must be fairly simple, if there is one. It may look like a complex problem in text, but it's really not. I just have no clue what so ever on how to fix this. If you know the answer, then hands down... you are a genius with html/css. Thanks beforehand for any suggestions BTW. Again, I would really appreciate any assistance.

[drhowarddrfine]

Will try and answer some of your questions.
1) IE will never perform correctly without a proper doctype. So this is a big hangup with myspace and other free web sites which tend to throw a wrench into proper web development. Right now, IE is in 'quirks' mode.

[drhowarddrfine]

Will try and answer some of your questions.
1) IE will never perform correctly without a proper doctype. So this is a big hangup with myspace and other free web sites which tend to throw a wrench into proper web development. Right now, IE is in 'quirks' mode.
2) Using tables for layout is a no-no. I've never done it that way so I can't help with that.

[drhowarddrfine]

IE tends to screw up margins and padding on borders so try adding *{margtin:0;padding:0} to your css.

[TheCeej]

Will try and answer some of your questions.
1) IE will never perform correctly without a proper doctype. So this is a big hangup with myspace and other free web sites which tend to throw a wrench into proper web development. Right now, IE is in 'quirks' mode.
2) Using tables for layout is a no-no. I've never done it that way so I can't help with that.

Well, I'm not actually creating any tables. I'm just moving the Myspace tables further down the page, and adding in DIVs where they originally were. Many people choose to hide these myspace tables, then make the entire thing with DIVs. That always works. However, I don't wanna get rid of those tables, so I'm just moving them down with that part of the CSS that states:

table table {position:relative; bottom: -654px;}
table table table {position:static;}

The problem is that in IE, that little bit of coding is also bringing my DIVs further down the page along with the tables. In Firefox, the DIVs are unaffected by this. So basically, what IE is obviously doing is treating my DIVs as though they are tables with that coding listed above. I'm just thinking there must be something else I can add in my coding to prevent IE from bringing the DIVs down with the tables. A code to seperate them more or less. Any ideas? BTW, I really appreciate the help.