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>

[elphaba]

Hello again,

I did position absolutely according to your remarks the main pic (the one of me) with the other divs positioned relatively. While my layouts are all basically contained in near perfect position from browser to browser (Mac:IE7/Safari-PCIE6/Firefox) there are still slight differences (incredibly noticeable to me). I really would love to truncate the area of dead space beneath the images, too. Do you know how to do this? Lastly, if I put unlinked text on my page it is not visible. I had the same problem with the top 13 link nav bar but figured out how to fix that. I have not been able to resolve the hidden text issue. My player still does not play when I am signed into Myspace - works in every other scenario. I am now wondering if it is a MySpace error.

Thanks again!
-KJ

Here is my current code:

About Me:

CODE

<style type="text/css">
.n{ HIDE STUFF }
.userProfiledetail, .userProfileURL, .userProfileSchool,
.interestsAndDetails, .friendsComments,.extendedNetwork,
.latestBlogEntry, .friendSpace, .orangetext15, .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 DEFAULTS }
{class for the basic font for the page}
.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;}

{This is how all anchor points will be displayed; anchor points appear before all links.}
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;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
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;}

{"Help" and "Signout" in very top in right corner}
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>

Who I'd Like to Meet:
<div style="position: absolute; z-index:4; left:50%; margin-left:-85px; top:400px; width:170px; height:345px; ">
<img src="http://a67.ac-images.myspacecdn.com/images01/87/m_c87e58f7ac6d228e475d7dbaa28b8552.jpg">
</div>

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

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

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

<div style="position:relative; z-index:5; width:217px; height:162px; left:150px; top:-1520px;">
<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:-1400px;">
<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:-300px; top:-1100px; width:218px; height:150px; background:transparent; overflow:hidden;">
<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>

It seems to have pasted correctly this time; hopefully, it will survive the form submit.

-KJ