div layout works in Safari(on Mac) and Firefox(on PC) but not IE 6(on PC) or IE 7 (on Mac) Options

[elphaba]

I have had a terrible time getting my divs to layer correctly. If I code it to layer correctly in IE, it's wrong in Safari and Firefox and vice versa. Could someone look at my code and tell me if it is missing something or has an error that would correct the issue.

Also, my flash player is audible but not visible when I am logged into Myspace - audible and visible when not logged in or from someone else's logged in profile. I have not been able to figure out why it is doing this; I had not changed my code in some time when I first noticed the problem.

Thanks,
KJ

Myspace profile:
myspace.com/txbluebonnet

Code in About Me section:

CODE

<style type="text/css">
.n{ HIDE STUFF }
.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;}
body div table td form {display:none!important;}
table, td, tr{ background-color:transparent;}
body div td div div select {width:0px !important;}
tr td div select{display:none!important;position:relative !important; left:-5000px;}
</style>

<style type="text/css">
body{
background-color:000000;
font-family:tahoma;
font-size:8pt;
color:linen;
border:none;}
div,p,xmp,table,tr,td,th{
background-color:transparent;
background-repeat: repeat;
scrollbar-arrow-color:white;
scrollbar-track-color:darkred;
scrollbar-shadow-color:black;
scrollbar-face-color:CCFFFF;
scrollbar-highlight-color:CCFFFF;
scrollbar-darkshadow-color:CCFFFF;
scrollbar-3dlight-color:CCFFFF;
font-family:tahoma;
font-size:8pt;
color:linen;
border:none;}

input, select, .textfield, .textarea, .button {
font-family:tahoma;
font-size:8pt;
color:linen;
background-color:transparent;
text-align:left;}

.text {font-family:tahoma; font-size:8pt; line-height:10pt; color:linen; text-align:justify;}

b,i,strong,em,u,s {font-family:tahoma; font-size:8pt;color:linen;font-weight:normal;cursor:help;}

a, a:link,a:active,a:visited{font-family:tahoma; font-size:8pt; line-height:10pt; color:linen;text-decoration:none}
a:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:red;}

a.navbar,a.navbar:link,a.navbar:active,a.navbar:visited{font-family:tahoma; font-size:8pt;color:linen;text-decoration:none}
a.navbar:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:red;}

a.man,a:link,a:active,a:visited{font-family:tahoma; font-size:8pt;color:linen; text-decoration:none;}
a:hover{font-family:tahoma;
font-size:8pt;color:FFFF00; text-decoration:none;}
</style>

<div style="position:relative; z-index:1; width:200px; height:200px; left:-250px; top:-100px; ">
<img src="http://www.kjstrong.com/images/sunandsurf.jpg">
</div>

<div style="position:relative; z-index-2; width:200px; height:200px; left:25px; top:200px; ">
<img src="http://www.kjstrong.com/images/TreeofLife380.jpg">
</div>

<div style="position:relative; z-index:3; width:200px; height:200px; left:-175px; top:-325px;">
<img src="http://www.kjstrong.com/images/collier-lilith2_bw.jpg" width="311" height="645">
</div>


<div style="position: relative; z-index:4; left:0px; top:-400px; width:144px; height:265px; ">
<img src="http://a67.ac-images.myspacecdn.com/images01/87/m_c87e58f7ac6d228e475d7dbaa28b8552.jpg">
</div>

<div style="position:relative; z-index:5; width:100px; height:91px; left:150px; top:-870px;">
<img src="http://www.kjstrong.com/images/KJ_chrome1.jpg">
</div>

<div style="position:relative; z-index:6; width:100px; height:100px; left:200px; top:-700px;">
<p align="left">
<a
href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD05NTc1NTcxMyZNeVRva2Vu
WYxZGI3NjY5LWZmNjktNGQxYi1iYmUzLWVkYmY3MjRlN2UyZg==">Add Me</a>
<br><a
href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD05NTc1NTcxMyZNeXRva2VuPUJDQTFDNjEyLTIzQjUtNEEzNi05QUM4RDE1NTk4R
RCNjA5NzIyOTg0MTk=">Message Me</a>
<br><a
href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTk1NzU1NzEzJk15
G9rZW49YjU0YWJkMzQtODIzNS00OWU0LThmMzQtMTE2NDIwNzNjZmU2">Comment Me</a>
<br><a
href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdDb21tZW50cyZmcmllbmRJRD05NTc1NTcxMw==">Comments</a>
<br><a
href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdmcmllbmRzJmZyaWVuZElEPTk1NzU1NzEz"> Friends</a>
<br><a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld1BpY3R1cmUmZnJpZW5kSUQ9OTU3NTU3MTM=">
Pics</a>
</p></div>

<div style="position:relative; z-index:7; left:-250px; top:-350px; width:218px; height:125px; background:transparent;">
<center>
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="155" width="218" align="middle" data="http://www.mp3asset.com/swf/mp3/myflashfetish-mp3-player.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.mp3asset.com/swf/mp3/myflashfetish-mp3-player.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="myid=1816453&path=2007/03/24&mycolor=444444&mycolor2=000000&mycolor3=FFFFFF&autoplay=true&rand=0&f=3&vol=100" />
</object>
</center>
</div>

[S-Majere]

Yeowch, the code you've given looks very messed up on my test page compared to your own profile. I can only assume you haven't copied it accross correctly?

The best advice I can give to you right now without being able to work with a working code is to absolutely position your main image and relative position everything else. Use the left and right properties as you have done but make it similar to this:

left:50%;
margin-left:-345px;

Where the "-345px" is exactly half the width of your main banner image. This should center align your DIV in all browsers, at all resolutions.

Your flash player is visible to me - but try setting it in a DIV layer with a high Z-index number.