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]

Try replacing your music player code with this:

CODE

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

If that doesn't solve it, what was it you changed in your music player code?

[kingofrock]

Nope, that didn't do the trick..

Here is what I originally had, which the videos don't overlap:

CODE

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

and this is the new one:

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>

thanks,
Kyle

[Mickey]

So what was wrong with the first code?

[kingofrock]

The music player is located correctly in FF but wrong in IE for the first code. The second code corrects that problem, but then gives me this video problem.

If its not one thing, its another.. lol

[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.

[kingofrock]

Thanks a lot!! It worked!

Your the man!

[Mickey]

Thanks. Topic closed & moved.