my layout is all werid on IE, it wont scroll, and all my boxes are cluttered into one, this is a div layout, not a normal one, please read my html and see what i did worng, please? : O

html in "about me"

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

.box1 {
position:absolute;
width:398px;
height:150px;
overflow:auto;
background-color:transparent;
border:1px solid black;
top:193px;
left:54.6%;
margin-left:-385px;
color:white;
}
* html .box1 {
position:absolute;
width:398px;
height:150px;
top:193px;
left:54.6%;
margin-left:-385px;
}


.box2 {
position:absolute;
width:247px;
height:292px;
overflow:auto;
background-color:transparent;
border:1px solid black;
top:193px;
left:68.2%;
margin-left:-103px;
color:white;
}
* html .box2 {
position:absolute;
width:247px;
height:292px;
top:193px;
left:68.2%;
margin-left:-102px;
}

.box3 {
position:absolute;
width:475px;
height:218px;
overflow:auto;
background-color:transparent;
border:1px solid black;
top:386px;
left:50.5%;
margin-left:-385px;
color:white;
}
* html .box3 {
position:absolute;
width:475px;
height:218px;
top:386px;
left:50.5%;
margin-left:-384px;
}

.box4 {
position:absolute;
width:220px;
height:496px;
overflow:auto;
background-color:transparent;
border:1px solid black;
top:500px;
left:69.7%;
margin-left:-103px;
color:white;
}
* .box4 {
position:absolute;
width:220px;
height:496px;
overflow:auto;
background-color:transparent;
border:1px solid black;
top:500px;
left:69.7%;
margin-left:-103px;
color:white;
}

.ftd {Moves the entire profile up - hey hey hey goodbye}
body table {margin-top:-5000px;}

.ftd {Keeps the ad, search form, and navigation links in place}
body td table, body div table {margin-top: 0;}

.ftd {Makes the table the ad, search form and nav links are on transparent}
table, tr, td {background-color:transparent;}

.ftd {Removes the search form}
body div table form{display:none;}

.ftd {For comment boxes to display}
body table div form{display:block;}

.ftd {Hides the dividers in between the nav links}
div table td font {visibility:hidden; }

a.navbar:active, a.navbar:visited, a.navbar:link { color:808080; }
a.navbar:hover { color:FFFFFF; }

.navbar{position:relative; top:30px; visibility:visible !important;}



body {
background-color:000000;
background-image: url(http://img249.imageshack.us/img249/5074/layoutwz9.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
scrollbar-face-color:000000;
scrollbar-3dlight-color:000000;
scrollbar-shadow-color:FFFFFF;
scrollbar-darkshadow-color:000000;
scrollbar-arrow-color:808080;
scrollbar-track-color:000000;
}


.bottom {
background-color:transparent;
border: 0px solid white;
position:absolute;
left:50%;
margin-left:-25px;
top:900px;
height:100px;
width:50px;
z-index:1;
}

</style>
html in "who i would like to meet"

HTML Code:
<div class="box1"> <br><center><div align="center"><form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input type="hidden" name="friendID" value="29369839"><textarea name="f_comments" id="f_comments" cols="42" rows="5" style=" background-color:transparent!important; background-image: url(http://); background-position: top left; background-attachement: fixed; background-repeat: repeat; border-width:2px!important; border-color:black!important; border-style:none!important; font-family:Courier!important; font-size:10px!important; color:pink!important; width:200px!important; height:50px!important; ">Lulwut?</textarea><br><input type="submit" value="Submit"><input type="reset" value="Clear"></form><form action="http://www.fcslinks.com" method="post"></center> </div>
<div class="box2"> <br><center>Box 2</center> </div>
<div class="box3"> <br><center>Box 3</center> </div>
<div class="box4"> <br><center>Hello Peoples. My name is Chan. Im a 8th grader
</center> </div>



<div style="position: relative;
height: 400px;
overflow: hidden;
border: 0px;">
<table><tr><td><table><tr><td>
what i see on firefox



what i see on IE