MySpace Band Music Player

Addressing the Music Player

Looking at This Diagram , which shows the Layout of the Myspace Music Page; I can see that the music player can be addressed as follows;

table table td.text div object

I also know (because I read the code to troubleshoot some issues) that for Non IE browsers, it is really here:

table table td.text div object object




There are other ways of addressing the music player, I prefer the above syntax.
It is as explicit as reasonable. If I was overriding something, or thought there would be a need to over ride this code line, it might make since to do this:
table td table td.text div object

If I have other objects on my page, it becomes more important that I address my player as explicitly as possible. If I do not, it is not as important.



If I have no other objects on my page, I can take the super shortcut.
I can use just this
object {the stuff I want to do to it}



If I want to move the player, to the top left of my page (or my div if I have installed my div such that the player is logically inside it). I do this:

<style>
.i {display:none;}
table table td.text div object {position:absolute; top:0px; left:0px;}
table table td.text div object object {position:static}
</style>

If I want to move the player 100 pixels to the right, of its current location, I do this:

<style>
.i {display:none;}
table table td.text div object {position:relative; top:0px; right:-100px;}
table table td.text div object object {position:static;}
</style>

If I want to position my player, with reference to the top center of the page, I want to use this:

<style> 
.i {display:none;}
table table td.text div object {position:absolute; top:0px; left:50%; margin-left:-100px;}
table table td.text div object object {position:static; margin-left:0px;}
</style>

Unless you are using a div overlay, which uses a concept that allows it to be used as a reference point for the absolute positioning of the myspace page elements, you want to use the above method.
If you used my div overlay strategy, you can instead use the top left of your div as the reference, and use the example that does not require the margin-left value.

In both examples, left can be changed to right; and the numbers can be altered to work with your profile.
However, do NOT change the 50%, that is what allows you to measure from the center.
50% is the ONLY value that will insure you are measuring from the center, no matter what the screen/page size is.


It is no longer as easy to resize the player. Shrinking the player crops it, instead of really shrinking it.
A matrix filter can be used, in IE, to shrink it, but then the controls do not align correctly (and the filter does not work in other browsers).

IF you have other objects, on your page, Give those objects their own class (or put them in a div with its own class)
Then for each style attribute, you set for the music player, you need to have an override command, to set that style attribute, for your other objects.
For example:

<div class="myObject1">
object code here
</div>

Now I insure that I have set the position for this object. If I want it to position using flow (meaning I just let it fall, where it will, based on where I put the code) I need to assign position:static. This is to override the position:absolute which was applied to the music player object.

<style>
table table td.text div.myObject1 object{position:static !important;}
</style>

OR, you can apply positioning to the object.
However, since you have it in a div, it really makes more sense to just position the div.

<style>
div.myObject1 {position:absolute; top:300px; left:50%; margin-left:-100px;}
table table td.text div.myObject1 object{position:static !important;}
</style>

Notice that I still assigned the object position:static to override what I had applied to the music player object.