Video on DIV Layout, music player moves when video code is added Options

[cheetarah]

To start off my div layout code is:

CODE

<style type="text/css">body{
background-color: 000;
background-image:url();
background-position:top left;
background-repeat:repeat;
background-attachment:scroll;
scrollbar-arrow-color:bddee7;
scrollbar-track-color:000;
scrollbar-shadow-color:e5e5e5;
scrollbar-face-color:e5e5e5;
scrollbar-highlight-color:e5e5e5;
scrollbar-darkshadow-color:e5e5e5;
scrollbar-3dlight-color:e5e5e5;}

.div{
position: absolute;
left: 50%;
margin-left:-357px;
top: 130px;
z-index: 0;}

.section1{
position: absolute;
left: 50%;
margin-left:-135px;
top: 480px;
z-index:5;
width: 260px;
height: 232px;
overflow: auto;}

.navigation{
background-color:transparent;
position:absolute;
left: 50%;
width:120px;
height:405px;
z-index:5;
margin-left:-227px;
top:460px;
overflow: auto;}

.block{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873aa.png) top left no-repeat;
display: block;}

.block:hover{
background-position: bottom left;}

.add{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ab.png) top left no-repeat;
display: block;}

.add:hover{
background-position: bottom left;}

.message{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ac.png) top left no-repeat;
display: block;}

.message:hover{
background-position: bottom left;}

.comment{
height:50px;
width: 68px;
background-color:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ad.png) top left no-repeat;
display: block;}

.comment:hover{
background-position: bottom left;}

.navigation2{
background-color:transparent;
position:absolute;
left: 50%;
width:120px;
height:405px;
z-index:5;
margin-left:153px;
top:460px;
overflow: auto;}

.blog
{height:50px;
width:68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ae.png) top left no-repeat;
display: block;}

.blog:hover{
background-position: bottom left;}

.friends{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873af.png) top left no-repeat;
display: block;}

.friends:hover{
background-position: bottom left;}

.home{
height:50px;
width: 68px;
background-color:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ag.png) top left no-repeat;
display: block;}

.home:hover{
background-position: bottom left;}

.pics{
height:50px;
width: 68px;
background-color:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ah.png) top left no-repeat;
display: block;}

.pics:hover{
background-position: bottom left;}



body,table, td, li, p, div
{
font:normal 9px verdana;
color:000;
font-weight:none;
border:0px;
text-transform: none;
line-height:12px;}

textarea{
background-color: transparent;
width: 150px;
height: 50px;
color: 000;
font:7px small fonts;
text-transform:uppercase;
border: solid 1px 000;}

a:active,a:visited,a:link,a{
color:73dfdf;
font-size:10px;
margin-top:1px;
cursor:default;
font-weight:normal;
letter-spacing:1px;
font-family:tahoma;
text-decoration:none;
text-transform:none;
}
a:hover{
color:a1277e;
font-size:10px;
margin-top:1px;
cursor:default;
font-weight:normal;
letter-spacing:1px;
font-family:tahoma;
text-decoration:none;
text-transform:none;}

.standard b, p b, B, strong {
font-family:georgia;
font-size:9px;
color:183d11;
font-weight:none;
border:0px;
text-transform: none; }
table table div form {display:inline !important;}
.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}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
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;}
table div div{visibility:hidden;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
body div div form {display:none !important;}td td embed, td td embed, td td object{position:absolute;top:0px;right:0px;width:45px;}div div div select {position:absolute !important; margin-left:-1000px !important; left:0px !important; display:none !important; }div div table div {display:none;} div form, .mslogo, div ul {display:none!important;}
div div, div td {background-color:transparent; background-image:none!important;}
div.profileWidth {margin-top: -30px !important;}div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}div.profileWidth div.clearfix, i i i,
div.profileWidth div div {filter:none; opacity:0.9999}div.profileWidth div.clearfix {position:relative; top:30px}
div div select, div div form {display:none !important;}</style>


<div class="div">
<img src="http://cbimg6.com/layouts/07/08/22/20873ai.png" usemap="#cassette" border="0"><map name="cassette">


<area shape="rect" alt="" coords="301,189 397,202" href="http://www.atomicaffliction.com">


</map> </div>



<div class="section1"><center><p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</center></div>


<div class="navigation">
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXX&MyToken=60073af5-e929-4c7a-b357-3f1b6da0bbfb" class="message">
<a href="http://friends.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXX" class="block">
<a href="http://messaging.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXX" class="add">
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=XXXXXX" class="comment">
</div>

<div class="navigation2">
<a href="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=1bfdd5cd-9c1d-46fa-83c4-7f30e0fe3ffa" class="home"></a>
<a href="http://home.myspace.com/Modules/ViewFriends/FriendsView.aspx?friendID=XXXXXX" class="friends">
<a href="http://blog.myspace.com/index.cfm?fuseaction=blog.ListAll&friendID=XXXXXX" class="blog">
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXX" class="pics">

</div>

I want to add a video on the bottom of the layout. I checked out the closed topic on how to add video on the div layout.

I added the video code.

CODE

<div style="position:absolute; top:500px; left:50%; margin-left:-500px;">PUT VIDEO CODES HERE</div>

And I deleted this from my layout code:

CODE

td td embed, td td embed, td td object{position:absolute;top:0px;right:0px;width:45px;}

The video is displayed ok, but now the music player moves from its place and is hidden behind the background of the layout.

How can I fix this, so that the player pause/play button is shown on the top right corner like it did before I added the video?

Reason for edit: Use [codebox] for longer codes. -Gabi :)

[cheetarah]

Hi, I hadn't been able to come to the forum.
Before I forget my url is http://www.myspace.com/manicuresncherries
I still can't put a video on my layout.
I've made some changes to the code I posted previously.
My layout code at the time is

CODE

<style>body{
background-color: 000;
background-image:url();
background-position:top left;
background-repeat:repeat;
background-attachment:scroll;
scrollbar-arrow-color:bddee7;
scrollbar-track-color:000;
scrollbar-shadow-color:e5e5e5;
scrollbar-face-color:e5e5e5;
scrollbar-highlight-color:e5e5e5;
scrollbar-darkshadow-color:e5e5e5;
scrollbar-3dlight-color:e5e5e5;}

.div{
position: absolute;
left: 50%;
margin-left:-357px;
top: 130px;
z-index: 0;}

.section1{
position: absolute;
left: 50%;
margin-left:-135px;
top: 480px;
z-index:5;
width: 260px;
height: 232px;
overflow: auto;}

.section2{
position: absolute;
left: 50%;
margin-left:-145px;
top: 750px;
z-index:5;
width: 285px;
height: 232px;
overflow: auto;}


.navigation{
background-color:transparent;
position:absolute;
left: 50%;
width:120px;
height:405px;
z-index:5;
margin-left:-227px;
top:460px;
overflow: auto;}

.block{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://img93.imageshack.us/img93/9084/vidsbt9.gif) top left no-repeat;
display: block;}

.block:hover{
background-position: bottom left;}

.add{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ab.png) top left no-repeat;
display: block;}

.add:hover{
background-position: bottom left;}

.message{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ac.png) top left no-repeat;
display: block;}

.message:hover{
background-position: bottom left;}

.comment{
height:50px;
width: 68px;
background-color:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ad.png) top left no-repeat;
display: block;}

.comment:hover{
background-position: bottom left;}

.navigation2{
background-color:transparent;
position:absolute;
left: 50%;
width:120px;
height:405px;
z-index:5;
margin-left:153px;
top:460px;
overflow: auto;}

.blog
{height:50px;
width:68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ae.png) top left no-repeat;
display: block;}

.blog:hover{
background-position: bottom left;}

.friends{
height:50px;
width: 68px;
background-COLOR:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873af.png) top left no-repeat;
display: block;}

.friends:hover{
background-position: bottom left;}

.home{
height:50px;
width: 68px;
background-color:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ag.png) top left no-repeat;
display: block;}

.home:hover{
background-position: bottom left;}

.pics{
height:50px;
width: 68px;
background-color:transparent;
hidden;
background: url(http://cbimg6.com/layouts/07/08/22/20873ah.png) top left no-repeat;
display: block;}

.pics:hover{
background-position: bottom left;}



body,table, td, li, p, div
{
font:normal 9px verdana;
color:000;
font-weight:none;
border:0px;
text-transform: none;
line-height:12px;}

textarea{
background-color: transparent;
width: 150px;
height: 50px;
color: 000;
font:7px small fonts;
text-transform:uppercase;
border: solid 1px 000;}

a:active,a:visited,a:link,a{
color:73dfdf;
font-size:10px;
margin-top:1px;
cursor:default;
font-weight:normal;
letter-spacing:1px;
font-family:tahoma;
text-decoration:none;
text-transform:none;
}
a:hover{
color:a1277e;
font-size:10px;
margin-top:1px;
cursor:default;
font-weight:normal;
letter-spacing:1px;
font-family:tahoma;
text-decoration:none;
text-transform:none;}

.standard b, p b, B, strong {
font-family:georgia;
font-size:9px;
color:183d11;
font-weight:none;
border:0px;
text-transform: none; }
table table div form {display:inline !important;}
.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}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
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;}
table div div{visibility:hidden;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td td embed, td td embed, td td object{position:absolute;top:0px;right:0px;width:45px;}


a.navbar, a.navbar:active, a.navbar:visited, a.navbar:link { color:808080; }
a.navbar:hover { color:FFFFFF; }


</style>


<div class="div">
<img src="http://cbimg6.com/layouts/07/08/22/20873ai.png" usemap="#cassette" border="0" /><map name="cassette">


<area shape="rect" alt="" coords="301,189 397,202" href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmF0b21pY2FmZmxpY3Rpb24uY29t" />


</map> </div>



<div class="section1"><center><p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</center></div>

<div class="section2">
<img src="http://www1.istockphoto.com/file_thumbview_approve/5546413/2/istockphoto_5546413-concert-crowd.jpg" />

<div class="navigation">
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD1YWFhYWFgmTXlUb2tlbj02MDA3M2FmNS1lOTI5LTRjN2EtYjM1Ny0zZjFiNmRhM
JiZmI=" class="message">
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja1VzZXImdXNlcklEPVhYWFhYWA==" class="block">
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5h
GRmcmllbmRfdmVyaWZ5JmZyaWVuZElEPVhYWFhYWA==" class="add">
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdDb21tZW50cyZmcmllbmRJRD1YWFhYWFg=" class="comment">
</div>

<div class="navigation2">
<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyJk15VG9rZW49MWJmZGQ1Y2QtOWMxZC00NmZhLTgzYzQtN2YzMGUwZmUzZmZh" class="home"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9Nb2R1bGVzL1ZpZXdGcmllbmRzL0ZyaWVuZHNWaWV3LmFz
Hg/ZnJpZW5kSUQ9WFhYWFhY" class="friends">
<a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9WFhYWFhY" class="blog">
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD1YWFhYWFg=" class="pics">

</div>

<div style="position:absolute; top:500px; left:50%; margin-left:-500px;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="344" width="425" data="http://www.youtube.com/v/400Had3wMI8&hl=es&fs=1">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/400Had3wMI8&hl=es&fs=1" />
</object></div>

I want to put a 2 videos one on each side of the image at the bottom.



I don't know if I have to open another post but I need help to fix a the following in my layout:

1. As you can see in the thumbnails my Music player and the Myspace Logo is not showing on Firefox, only in IE. How can I fix this?

Myspace on IE Myspace on Firefox

2. The original layout hid the myspace navbar and the bottom links. I tried to unhide the navbar but don't know if I did it right and I can't make the bottom links show on the layout.

3. How can I put my friends or random images as a marquee from right to left at the bottom of the layout?
Thanks for your help!!!