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

[emblazed]

Sorry for not being able to reply, had to go out on a call.

Thanks for the help on the code. As for having the tables underneath the banners and custom left side? I'm not sure exactly what that means.

My main intention with this is to be able to create those images via photoshop and use those for the overlay and be able to interchange them later with updated images created in photoshop.

Example: the body1.jpg I'm going to update later with a little about me/band section with text created in photoshop on the actual image, then just upload that image.

I'd like to be able to create another overlay section then place the comments on top of it and also be able to move around the band music player on top of that body1.jpg. Basically sort of my own version of that myspace.com/ryancabrera page I guess

Again thanks sooo much for the help!