Videos overlapping each other in div Options

[kingofrock]

The videos were fine before today. They would be stacked on top of each other with a scroll bar to be able to see all of them. The only thing I did today was slighty change a code for my music player. Other than that, everything stayed the same. Any help would be greatly appreciated.

http://www.myspace.com/kylewheelermusic

code for the videos:

CODE

<span class="off">!-Start Custom Code in Sounds Like-!</span>

</td></tr></table></td></tr></table></td></tr></table>

<span class="off">!-START code for custom text section-!</span>
<div class="myBio" style="width:525px; height:550px; position:absolute; top:1130px; left:450px; overflow:auto; color: 000000;">



<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="295" width="480" data="http://www.youtube.com/v/l76UcYsScpA&hl=en&fs=1">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/l76UcYsScpA&hl=en&fs=1" />
</object>

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="344" width="425" data="http://www.youtube.com/v/0w0LIKN4sOM&hl=en&fs=1">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/0w0LIKN4sOM&hl=en&fs=1" />
</object>

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="344" width="425" data="http://www.youtube.com/v/vs5Bs-v5p_s&hl=en&fs=1">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/vs5Bs-v5p_s&hl=en&fs=1" />
</object>

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="344" width="425" data="http://www.youtube.com/v/-om0QUoseI8&hl=en&fs=1">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/-om0QUoseI8&hl=en&fs=1" />
</object>


</div><span class="off">!CLOSE Text Div!</span>
<style>
table div.myBio {display:block; visibility:transparent;}
</style>
<table><tr><td><table class="off"><tr><td><table><tr><td>
<span class="off">!-END Custom Code in Sounds Like-!</span>

code for music player if it would apply:

CODE

<style>
{!-music player-!}
object {position:absolute !important; top:31px; _top:31px; left:50%; margin-left:-225px; z-index:4;}
td td td object {position:static; margin:auto;}
</style>

[Mickey]

Then all you have to do is duplicate the positioning attributes but add underscores before them so the code ends up looking like this:

CODE

<style>
{!-music player-!}
table table td.text object {position:absolute !important; top:30.5px !important; left:250px; _top:30.5px !important; _left:250px;}
</style>

Although really, you shouldn't use left to position it. You're supposed to combine that with margin-left so your code ends up like this:

CODE

<style>
{!-music player-!}
table table td.text object {position:absolute !important; top:30.5px !important; left:50%; margin-left:-400px; _top:30.5px !important; _margin-left:-400px;}
</style>

What you'll need to change is the margin-left value and leave the left value alone. If it doesn't look right in IE, play around with the values of the attributes with underscores before them. That's basically it.