Div overlay help, IE related Options

[emblazed]

Trying to do my band profile and having some trouble, I thought I had it all worked out but then checked a few other browsers and no go. Any help is appreciated :)

I know I may be doing something wrong as the code is all over the map. Thanks for the help

Issue: Divs for the buttons are not in right positioning.
Works ok on: Flock and Google Browser
Does not on: Internet Explorer, Safari
Untested: Firefox

Whats the best solution for this? I was looking at a few profiles and noticed one like myspace.com/ryancabrera and they seemed to use a bunch of frames (dont know the word for it) to set in place the image overlays. Should I do this and if so how?

Heres the code

CODE

<style type="text/css">
.friendsComments {display:none;}
</style>

<style type="text/css">body table { margin-top: 700px;_margin-top: 700px; color: 000000; }
body td table, body div table { margin-top: 0; _margin-top:0; color: 000000; z-index:9;}</style>

<style type="text/css">
.masthead {position:absolute; margin-top:-812px; margin-left:-400px; left:50%; width:800px; height:762px; z-index:8;}
</style>
<style type="text/css">
.masthead2 {position:absolute; margin-top:-84px; margin-left:-400px; left:50%; width:800px; height:1438px; z-index:8;}
</style>

<style type="text/css">
.masthead3 {position:absolute; margin-top:123px; margin-left:-400px; left:50%; width:800px; height:1231px; z-index:8;}
</style>



<div class="masthead">
<img src="http://architecturalcollection.com/nucast/head1.jpg" />
</div>
<div class="masthead2">
<img src="http://architecturalcollection.com/nucast/hitbox1.jpg" />
</div>

<div class="masthead3">
<img src="http://architecturalcollection.com/nucast/body1.jpg" />
</div>

<div style="position:absolute;
top:245px;
left:335px;
overflow:auto;width:200;height:200;
color:Black;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:center;
background-color:Transparent;
background-image: url();
background-position:center;
background-repeat:no-repeat;
border:0px solid silver;">
<a href="URL HERE">
..
</a>

</div>


<style type="text/css">
.add {position:absolute; margin-top:-25px; margin-left:-325px; left:50%; width:800px; height:1438px; z-index:8;}
</style>
<div class="add";
overflow:auto;width:242;height:88;
color:Black;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:center;
background-color:Transparent;
background-image: url(URL_TO_IMAGE);
background-position:center;
background-repeat:no-repeat;
border:0px solid silver;">
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD00MDQ3NzgzNjk=">
<img src="http://architecturalcollection.com/nucast/add1.jpg" border="0" />
</a>


<style type="text/css">
.message {position:absolute; margin-top:0px; margin-left:-395px; left:50%; width:800px; height:1438px; z-index:8;}
</style>
<div class="message";
overflow:auto;width:242;height:88;
color:Black;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:center;
background-color:Transparent;
background-image: url(URL_TO_IMAGE);
background-position:center;
background-repeat:no-repeat;
border:0px solid silver;">
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD00MDQ3NzgzNjkmTXlUb2tlbj00MTJmMzRhYy1kZGVhLTQ3NDgtYjgzZi00YmI1M
cyYTRmMzc=">
<img src="http://architecturalcollection.com/nucast/message1.jpg" border="0" />
</a>






<style type="text/css">
.comment {position:absolute; margin-top:-102px; margin-left:-141px; left:50%; width:800px; height:1438px; z-index:8;}
</style>
<div class="comment";
overflow:auto;width:242;height:88;
color:Black;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:center;
background-color:Transparent;
background-image: url(URL_TO_IMAGE);
background-position:center;
background-repeat:no-repeat;
border:0px solid silver;">
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTQwNDc3ODM2OSZN
VRva2VuPTQxMmYzNGFjLWRkZWEtNDc0OC1iODNmLTRiYjUzNzJhNGYzNw==">
<img src="http://architecturalcollection.com/nucast/comment1.jpg" border="0" />
</a>




<style type="text/css">
.photo {position:absolute; margin-top:0px; margin-left:-384px; left:50%; width:800px; height:1438px; z-index:8;}
</style>
<div class="photo";
overflow:auto;width:242;height:88;
color:Black;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:center;
background-color:Transparent;
background-image: url(URL_TO_IMAGE);
background-position:center;
background-repeat:no-repeat;
border:0px solid silver;">
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD00MDQ3NzgzNjk=">
<img src="http://architecturalcollection.com/nucast/photos1.jpg" border="0" />
</a>






<style type="text/css">
.blog {position:absolute; margin-top:-101px; margin-left:-170px; left:50%; width:800px; height:1438px; z-index:8;}
</style>
<div class="blog";
overflow:auto;width:242;height:88;
color:Black;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:center;
background-color:Transparent;
background-image: url(URL_TO_IMAGE);
background-position:center;
background-repeat:no-repeat;
border:0px solid silver;">
<a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9NDA0Nzc4MzY5">
<img src="http://architecturalcollection.com/nucast/blog1.jpg" border="0" />
</a>



<style type="text/css">
.videos {position:absolute; margin-top:2px; margin-left:-410px; left:50%; width:800px; height:1438px; z-index:8;}
</style>
<div class="videos";
overflow:auto;width:242;height:88;
color:Black;
font-size:9pt;
font-weight:bold;
font-family:arial;
text-align:center;
background-color:Transparent;
background-image: url(URL_TO_IMAGE);
background-position:center;
background-repeat:no-repeat;
border:0px solid silver;">
<a href="http://vids.myspace.com/index.cfm?fuseaction=vids.showvids&friendID=404778369&n=404778369&MyToken=3e7d1db7-4f1d-4a92-ae5e-9b8a698d574f">
<img src="http://architecturalcollection.com/nucast/videos1.jpg" border="0" />
</a>




</div>

<style type="text/css">
margin-top:762px;

{THIS MAKES THE BODY TABLE TRANSPARENT}
{*NOTE* - IF YOU DO NOT WANT THE BODY TABLE TRANSPARENT, SIMPLY CHANGE TRANSPARENT TO A COLOR}
table, tr, td{background-color:transparent;}

body, body.bodycontent{
background-color: FFFFFF;
background-image:url(http://architecturalcollection.com/nucast/bg.jpg);
background-position: 50% 50%;
background-repeat: repeat;
background-attachment: ;
overflow-x: hidden;
}





{THIS EDITS THE MAIN TEXT STYLE AND COLORS}
body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:000000;
font-size:8pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:arial;
}

{THIS CHANGES COLOR AND STYLE OF NAMETEXT AND HEADINGS}
.orangetext15, text, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{
color:74db7c;
font-size:8pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:arial;
}

{THIS CHANGES COLOR AND STYLE OF LINKS}
a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{
color:74dbef;
font-size:8pt;
font-weight:bold;
font-style:normal;
text-decoration:none;
text-transform:bold;
font-family:arial;
}

{THIS CHANGES COLOR AND STYLE OF LINKS ON HOVER}
a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{
color:74db7c;
font-size:8pt;
font-weight:bold;
font-style:normal;
text-decoration:none;
text-transform:bold;
font-family:arial;
}

{THIS ALSO MAKES THE BODY TABLE TRANSPARENT AND MAKES SURE ALIGNMENTS ARE FINE}
{NOTHING NEEDS TO BE CHANGED HERE EXCEPT IF YOU WANT THE FONT CHANGED}
p {margin: 0px 0px 1em 0px; font-family: arial !important}
body>div {margin-left: 0px;}
table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}
table table table td {background-color:transparent;margin:0px;padding: 0 0px 0px 0px}
table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}
table table table table td {padding:0px;margin:0px;}
table table table {
background-color: transparent;
border: 0 solid;
border-color: transparent;
width: 100%;
}
object {position:relative; z-index:1;}

body td table, body div table {margin-top: 0px;}
.a {hide URL label}
.a {hide top links}
.a {unhide navigation bar}
.navbar {visibility:visible;}

{THIS HIDES BASICALLY EVERYTHING ON THE LEFT SIDE]
{*NOTE* - IF YOU DON'T WANT THE LEFT SIDE HIDDEN, TAKE OUT EVERYTHING BUT .ORANGETEXT15 AND .WHITETEXT12}
.contactTable {display: none;}
.orangetext15 {display: none;}
.navigationbar {display: none;}
.userprofileurl {display: none;}
.profileInfo{display:none;}
.whitetext12 {display: none;}
img {border:0px;}

{THIS HIDES UNNECESSARY BORDER LINES WHEN HIDING SECTIONS}
table table table table div {visibility:hidden;}
div table table table table table div input, div a, td.text div {visibility:visible;}
table table table table div {visibility:hidden;}
div table table table table table div input, div a, td.text div {visibility:visible;}

</style>






<style type="text/css">
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style>

Thanks for the help, it's much appreciated.

B