HELP DIV FIREFOX AND IE7 !, AND HOVERS!! IF YOU CAN ! Options

[themusicworld205...]

THIS WORKS FOR FIREFOX BUT NOT IN IE7. WHY?
ANOTHER QUESTION HOW YOU PUT HOVERS LIKE IN THIS PAGE : http://www.divoverlay.com/myspace-layouts/preview/56

About Me:

CODE

<style type="text/css">



.BOTTOM-BG {
background-color:000000; color:000000;
border:15px solid; border-color:000000;
width:953px; height:130px; overflow:auto;
position:absolute; z-index:1; left:50%; top:0%;
margin-left:-490px; margin-top:1160px;
visibility:visible;}


.TOP-BG {
background-color:000000; color:000000;
border:15px solid; border-color:990000;
width:953px; height:980px; overflow:auto;
position:absolute; z-index:1; left:50%; top:0%;
margin-left:-490px; margin-top:150px;
visibility:visible;}

.NAV {
background-color:000000; color:000000;
border:0px solid; border-color:ffffff;
width:983px; height:30px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-490px; margin-top:315px;
visibility:visible;}

.TOP-BANNER {
background-color:000000; color:000000;
border:15px solid; border-color:990000;
width:953px; height:130px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-490px; margin-top:150px;
visibility:visible;}

.LEFT-BOX {
background-color:000000; color:000000;
border:2px solid; border-color:FFFFFF;
width:200px; height:500px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-475px; margin-top:350px;
visibility:visible;}

.CENTER-BOX {
background-color:000000; color:000000;
border:2px solid; border-color:FFFFFF;
width:515px; height:500px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-255px; margin-top:350px;
visibility:visible;}

.RIGHT-BOX {
background-color:000000; color:000000;
border:2px solid; border-color:FFFFFF;
width:200px; height:500px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:275px; margin-top:350px;
visibility:visible;}


.BOTTOM-BOX {
background-color:000000; color:000000;
border:2px solid; border-color:FFFFFF;
width:953px; height:200px; overflow:auto;
position:absolute; z-index:1; left:50%; top:0%;
margin-left:-475px; margin-top:860px;
visibility:visible;}

</style>




<style type="text/css">
.userProfiledetail, .userProfileURL, .userProfileSchool, .interestsAndDetails, .friendsComments,.extendedNetwork, .latestBlogEntry, .friendSpace, .orangetext15, .navigationbar, .profileInfo, .contacttable { display:none;}
a.text, table div font a, table div div {visibility:hidden;}
table tr td div font {display: none;}
table, td, tr{ background-color:transparent;}
</style>

<style type="text/css">

.a {hide top search bar}
div div select, div div form {display:none !important;}
<style>

I'd Like to Meet:

CODE

<div align="center"><div class="BOTTOM-BG">
</div>

<div class="TOP-BG">
</div>

<div class="NAV">
</div>

<div class="TOP-BANNER">
<img src="http://i96.photobucket.com/albums/l179/themusicworld2050/hvhdr.jpg">
</div>

<div class="LEFT-BOX">
</div>


<div class="CENTER-BOX">
</div>


<div class="RIGHT-BOX">
</div>


<div class="BOTTOM-BOX">
</div>




<style type="text/css">

body {
background-color:ffffff;
background-image:url(http://i96.photobucket.com/albums/l179/themusicworld2050/sdfdghj.jpg);
background-position: bottom left;
background-attachment:fixed;
background-repeat: no-repeat;
}
</style></div>

Reason for edit: codebox = holly

[digitalfragrance]

Have you tried aligning your tables in IE and adding the "!important" attritube to all of the margin values?