object position problem with multiple objects

[moscarda]

hi, i am working on a custom myspace page for a client.

this bit of code allows me to control where the myspace music player goes:

object {
position: absolute;
top: 559px;
left: 50%;
margin-left: -39px;}

but now every flash movie i try to add elsewhere, even if i give it a separate class with its own position, it gets repositioned by the above code.

how do i fix this? thanks so much!

[jscheuer1]

Well - say the class="otherobject":


.otherobject {
position: static!important;
margin-left: auto!important;
}

That will position it in the normal flow of the page, so the top and left will be meaningless. The margin-left should negate the margin from the other rule. The !important keyword will override other values for the same property that might otherwise be inherited from another selector.

[moscarda]

well the problem is that when someone posts a youtube video, for example, they arent given a chance to give it a class, i dont think, i was kind of hoping there would be a way to give just the music player absolute positioning, and all other objects would just show up where ever they are posted

[moscarda]

hmm this is really strange, i tried doing what you said, it should work for the layout anyway, even if i cant control other users posting flash movies in the comments...

now i'm able to add my objects without them being repositoned, but it somehow forced the myspace music player into a different spot, and in its place is a duplicate of one of the movies i gave the "otherobject" class to.

my head hurts.

[moscarda]

BTW/FYI:the music player is something that the page has built into it already, it is not within my editing capabilities to add a specific css class to it, the only way to alter it is thru the generic object css class.

[jscheuer1]

If you can give me a link to the page, and a link to a similar page with the flash object that has no customization. I may be able to find you better style hooks with which to work for this.

One thing though, are you absolutely sure that you are allowed by the mySpace terms of use to do this sort of customization?

[moscarda]

yeah im positive, you can customize anything as long as it doesnt cover the advertisements.


the page i'm working on is http://www.myspace.com/eatgiraffe

and here's a regular myspace band page with no custom css:

http://www.myspace.com/mybloodyvalentine

[jscheuer1]

The style hooks appear to be (for the main player):


#profile_mp3Player object

And for friends submitted flash:


td.columnsWidening object

Also, be aware That I don't see any friend submitted flash on the page you are editing, though I may have missed it, there are a number of animated gif images though, these (and all friend submitted images) will be styled with:


td.columnsWidening img

Since these should generally all be treated the same, use the compound selector:


td.columnsWidening object, td.columnsWidening img {
rules go here
}

Now, as I'm not sure if your styles come before the mySpace default styles or not, if any of yours have even a chance of contradicting the defaults, they should be followed by the !important keyword, ex:


#profile_mp3Player object {
position: absolute!important;
left: 20px!important;
top: 250px!important;
}

In fact, write them all like that, just to be on the safe side.

[moscarda]

wow, this is the most helpful and informative post i've found on the subject, thank you so much! yeah, i had to delete all my flash movies as well as the friend submitted ones until i could find a work around, which i have now, thanks to you! keep on rockin in the free world.