MySpace code Changes, Problems, Fixes

June 19 2008
Major change to top menu area, gotta love it.

Seriously, I will come up with code fixes, sometime tonight.

For now I have to concentrate on the work I get paid to do
(which is not this, because this code always gets stolen, and serves only to profit others besides myself).

Jan 18 2008
Mucking with the select short cut thing again. As before, I recommend just getting used to the thing, it is not really that bad.
Several things still work to hide it or move it.
Margins, opacity, even left and right movement via position:absolute.
They put an important after the static, and I don't exactly understand why I can override that with more explicit addressing, yet not override the top:inherit.

For some tips on styling this thing, to make it more palatable, go here:
Style search and short cut things

Jan 13 2008
It is my Birthday Today. I am in DisneyLand.

Dec 1 2007
Since they didn't back out the junk they added around the extendedNetwork table ...
(maybe they are taking the weekend off) I will publish some fixes.

I have tried to do this in a way, which will still work if they back the change out.
IF you want to display the extendedNetwork (status feature box) and REMOVE the extra space created in that space
The below works well if you have used
table table table {style stuff in here}
to assign your borders and/or background to each of the content tables.

If you have assigned your desired border directly to
table.extendedNetwork
Omit (do not use) the line of code I have marked as OPTIONAL:
to assign borders and/or background to all of your main content tables.
This code does works even if you are displaying a Calendar.
Place this code at the end of the "To Meet" section:

<i class=i>Remove new junk around extendedNetwork
<a href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9maXhlcw==">
mySpace code change fixes by Eileen</a>
</i>
<style>

.i {display:none !important;}

td.text table table {display:none;}
td.text table table.extendedNetwork {display:inline;}
td.text table.blurbs table,
td.text div.myDivFC table,
div.myDivFC td.text table {display:block;}

{! control space ! }
td.text br {display:none}
td.text table br {display:inline;}
td.text div.myDivFC br {display:inline;}
td.text table {margin-top:15px; margin-bottom:5px;}
td.text table table {margin-top:0px; margin-bottom:0px;}

{! OPTIONAL:border within extendedNetwork !}
table.extendedNetwork, table.extendedNetwork td {border:0px !important;}
</style>

</td></tr></table>
</td></tr></table>
<div class="myDivFC" >
<table class="i" ><tr><td>
<table><tr><td>

IF you want your extendedNetwork (status feature box) and any extra space created in that space, Gone
There are a few ways to get rid of this one.
Because I fully expect extra content to show up in the extra table they created below the status, I am going to recommend this one.
This Code will not remove, hide, or otherwise mess with your Calendar
Put this code at the bottom of the meet section:

<i class=i>Remove extendedNetwork ad junk around it
<a href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9maXhlcw==">
mySpace code change fixes by Eileen</a>
</i>
<style>
.i {display:none !important;}
td.text table {display:none;}
td.text table.blurbs, td.text table.blurbs table,
td.text table.latestBlogEntry {display:block;}
td.text div.myDivFC table,
div.myDivFC td.text table {display:block;}

td.text br {display:none}
td.text table br {display:inline;}
td.text div.myDivFC br {display:inline;}

td.text table.blurbs, 
td.text table.latestBlogEntry {margin-top:15px; margin-bottom:5px;}

</style>

</td></tr></table>
</td></tr></table>
<div class="myDivFC">
<table class="i"><tr><td>
<table><tr><td>

Extra border or Background around extendedNetwork
In this case you have kept the extendedNetwork (where the status message is) but you have an extra border or space around it.

The table that mySpace added does NOT have any border or background color defined.
If you are seeing this, it is coming from your own style code.
The most common cause (that I have seen) is to have set some sort of style (border and/or background) for ALL tables which are three tables deep.

Look for this:

table table table { some stuff to assign border and/or background }

You may have something equivalent but with slightly different syntax:
td td table
table td table td table
body table td table td table
There are others as well.

Replace it with this:

table.profileInfo,
table.contactTable,
table.userProfileURL,
table.InterestsAndDetails,
table.userProfileDetail,
table.userProfileSchool,
table.userProfileCompany,
table.userProfileNetworking,
table.extendedNetwork,
table.latestBlogEntry,
table.blurbs,
table.friendSpace,
table.friendsComments,
table.myBlurbs { the same style stuff you had for table table table }

You have extra space above and below
My suggestion is to either accept the space for now, and wait;
OR to remove some of the carriage returns and take control over the space between the tables yourself.

An Inner border has showed up inside my Extended Network Space
This is likely caused by having assigned an outer border at level
table table table
Because the extendedNetwork was at this level, this did an override of the border being assigned to the extendedNetwork by the myspace code.
You can now remove the default border as follows:

<style>
table.extendedNetwork, table.extendedNetwork td {border:0px !important}
</style>

Nov 30 2007
extendedNetwork (where the status now goes) has the same issue as it had for a while yesterday. (See Yesterday's entry)
I am not going to bother writing code to deal with it until it remains in place for at least 24 hours. (Yes this means if it is there when I get up tomorrow, I deal with it).

There is an addition BR (carriage return) at the top of the right column. There was one in the old code, and there are now two.

Nov 29 2007
Problem with extendedNetwork is gone
-- problem which was there earlier --
An additional table has been added to enclose the extendedNetwork table (table.extenddNetwork}
The structure has an additional table under the extendedNetwork as well.
To see the structure look at this:
myspace page showing table structure

This is causing obvious extra space in profiles where the table has been removed.
It is not so obvious in other profiles.
This puts the extendedNetwork table (where our status now is) down another table deep.
table table td.text table table.extendedNetwork.
The table underneath extendedNetwork will take up space.
It has a few cells in it.

I am not going to give out any code to fix it until I see what they are doing.
My guess is that they will move up the extendedNetwork class.



~ Nove 2007 Music Player issues
Changes to the music player code have resulted in some people having their music player hidden behind other content (sometimes it is a clear layer of something, and the symptom is that the buttons do not work).
The fix is to add a z-index to the code line you use to position your player.

i.e.
table table div object, table table div embed {position:absolute; top:Ypx; left:whatever; z-index:9}

Based on this change, it is not much much easier to add skin or coloring to the player.
If interested see this:
Add color myspace music player

9 Nov 2007

Resizing Music Player

Broken. I have no idea when this change occurred. Instead of shrinking the player, the effect of a resize is now to trim sections off of the player, so that only a fraction of the player shows.
I don't know if there is a solution, as I don't have a lot of time to play with it right now.
For now, I have fixed the situation, on my own pages, by clipping the player down to just a button and placing it just to the left of the Ad banner.
I have the code here:
MySpace music player hide, resize, move

2 Nov 2007

Short Cut Links Change Again

Is it time to just embrace this little box, as we have come to do with the ad banner?
I see NO OTHER purpose for the code they added, except to prevent people from hiding this. They are attempting similar changes related to the google search.

This is the block I am now using on my profiles, which is working for me:

<style>
div table div div select {position:absolute !important;  top:-200px !important; left:0px !important; }
</style>

I have another way that involves clip, but it is also dependent on position absolute (which I suspect they are going to break when they add one more !important to their own code).

19 Oct 2007:

Short Cut links

Today's change may cause short cut links, which were previously hidden, to show up again.
For now you can hide them like this:

<style>
div table div div select {height:0px !important; width:0px !important; padding:0px !important; position:absolute !important; top:0px !important; left:0px !important;}
</style>

The above code is a slight overkill; but based on the code they added, I highly suspect that myspace does NOT want this hidden.
On the Band page this is necessary to hide the google search drop down. On the regular page the google search drop down is within both form and select tags.

Google Search

For some this may have been effected. However if you are hiding it at the form level the new code will not effect your hide code.

<style>
div table div form {display:none !important}
</style>

Another thing I noticed is more space in that area.
I got rid of that with this:

<style>
div table div {padding:0px !important; margin:0px !important;}
</style>

I noticed code that may bring back the google search stuff on some pages. It didn't effect my pages because I rendered it display:none at the form level, they seem to be hitting it at a lower level.

I am again some what baffled by the code they did add.
Why block me from the usual way I would eliminate the block, without really preventing me from doing so.

They could just tell us what we are allowed to do with this space.
The current understanding is that we can hide everything except the ad banner.
If mySpace wants us to not hide the google search, why not just tell us not to.
Yes, some will still do it; but others will respect the rule.

Once they decide on the rules; put this information in a message on our home page.

MySpace could also structure their own code so that the stuff they do NOT want hidden is at a higher level, with a unique class and ID assigned at the higher level.
Placing the ad banner that deep, and at potentially multiple layers, has caused a lot of un-intentional ad banner hiding.
The fewer layers, between the body and the ad banner, the fewer commands it will take to override the usual methods people use to hide this stuff.

As for what changed;
MySpace has added code at the bottom (after any point where we can insert an override) to do the following to the id associated with the select box.
visibility:visible !important
display:inline !important
position:static
width:125px

They further render the entire profilelinks id all of the following:
visibility:visible !important
display:inline !important
position:static
padding-right:25px


10 Oct 2007:
After some reasonable stability for a few days, I discovered that my demo pages, which show all of the table boundaries, nesting, parent relationships, classes and such just didn't look right.

I have added coloring for the new class which showed up, along with a few other things.
You will better understand the changes I am about to mention if you look at this page:
MySpace page showing layout and classes
[note: due to the border-spacing attribute, this page really is easier to read using FireFox. It is ok in IE, but the boundaries are not quite as clear. FireFox is Free and you can download it using the icon on the top of my side bar]

The first thing I noticed (which I have fixed) was that my borders were overlapping, and some were not showing at all. A quick look at the code revealed a new style sheet had been added.
In this style sheet I find the following command:
table {font:inherit; font-size:100%; color:inherit; border-collapse:collapse;}
That pretty much explains the symptom I am seeing.

Fix:
I added this

<style>
table {border-collapse:separate}
</style>

I did not need !important because their style sheet was added BEFORE my own code input points.
IF I know for sure I have not set the border-collapse property, to collapse, for other tables on my page, I might use !important with the above command.

One I had this fixed I was able to get a much better view of the page.

Some things that I notice:
There are additional Divs in the top area of the page:
- Just below the ad banner (class="clear")
- around the google search
- around the drop down menu they added to the left of the google search
- below the google search (class="clear")
- below the main navigation menu (class="clear")

The new shortcut thing is not in a form, and is at the same depth as one of the ad banners.
However it is a Select, so we can hide it that way, without hiding the ad banner.
i.e.

<style>
div table div div select {display:none;}
</style>

We now need !important to hide the google search form. The below will fix issues with the google search form, the new select and the extra space caused by margins assigned to that space:
i.e.

<style>
div table div form, div table div div select {display:none !important;}
div table div { margin:0px !important;}
</style>

These are the things I was able to quickly identify. I don't have any more time to spend on this tonight (I really wonder if myspace is a waste of time).

Looking at this style sheet, I am sure there are other symptoms.
But I don't have time to dig through it right now. The border collapse was the most obvious issue, actually causing major symptoms on my own pages.

If you have a specific symptom, you want me to look at, post a comment. If I have time later tonight, I will have a look.

2 Oct 2007: More playing around with the online now icon. Same code change that showed up in early September, and again Yesterday, but was backed out in both cases.
Later that eveningAnd they backed it out AGAIN.

1 Oct 2007: More playing around with the online now icon. The code of early last month was there for a while, and then "poof" it was gone.
(I have no idea how long it was there, but it wasn't there last night, and it was there tonight.)

This gives me an idea.
I should write a program to monitor the myspace code, that might even be fun.
Nah, probably a huge waste of time, as most things myspace related are.

30 Sep 2007: Background issues seem to be fixed but I don't trust them.
Although the background issues seem to be fixed (they moved the style sheet up to before our code insert points, and removed the bodyContent class from the command); I still recommend being explicit in your own command. This does the most to decrease the risk that myspace will be able to override your background color command:
body, body.bodyContent {background-color:hotpink !important}
put between style tags. Change hotpink to transparent or any other color you want to use.
This may seem like over-kill, but can I trust them to keep the class name the same?
Can I trust them to not again use the classname in their own code?
While they are not likely to use !important, they might. If they use it prior to my code, I am ok. If they use the class, and !important, and put it AFTER our code input points, we may just have to accept their taste in color.

26 Sep 2007:
Background Color Issues:
Are the engineers who work for myspace, not capable of seeing, the effect of having this line of code in their style sheet:
.bodyContent{background-color:#e5e5e5;}
(yea, they get to use the pound sign, but that is irrelevant to the problem. The color e5e5e5 is a light shade of grey, and this command is in a style sheet which is applied near the end of the page). I believe those who have used the "official" myspace profile generator, may load the custom style sheet, it creates, instead of the default, where I found this command.

They are using the class name, therefore they are addressing the element more explicitly than those who just use
body {background-color:pink}

How can we get our background color to override theirs?
Well, we have to use !important.
And to make sure I get a successful override, I will use the class, and !important.

body.bodyContent {background-color:pink !important}

Do I really get the last say?
No, because guess where they put this style sheet. They put it near the end.
But as long as THEY do NOT use the keyword important, I win. My color rules.

Is this a mistake or is this a ploy to force people to use their profile generator?
It seems to obvious to be a mistake. But if they wanted to force me to use their generator, why did they not put in the keyword !important?
I am baffled.
(I might just accuse their engineers of having competency issues, but for all I know there is some valid reason for this, that I am not seeing.)


View All Friends link is no longer in span class="redlink".
It is now in a div. No class was assigned (they did assign an id, but that is useless as far as customizing goes, since myspace filters out the pound sign.).
The div is at level
table table td.text table.friendSpace td.text table div
I can shortcut this.
I don't really expect the class friendSpace to ever end up used for a different table, so I will shortcut the above some.
The below code will hide the link

<style>
table.friendSpace table div {display:none}
table.friendSpace table br {line-height:1px}
</style>

Warning: if they change the online now icon, back to what they did a few weeks ago, this will hide the online now icon as well. If that happens, we can add code to recover the online now icons.

If you have code to position your shows (on the band page) there is a good chance that the code has re-positioned the friend view link as well.
This time I will use the longer method of addressing the friend link div. Sometimes overrides do not work, if the address string does not include the same parent elements as the command we are trying to override.

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

If you are using code which has body and tdbody, or likes to jump over tables and through cells, when creating address lines; then try this:

<style>
body table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td div {position:static !important}
</style>

This will take care of overriding the code where someone felt they needed to include even the elements which added no value, as far as making the address explicit; AND those which like to take shortcuts through the td, without including the parent table.



Counter Issues
I can't help people with this one. But I can verify that I have seen reports in multiple forums indicating it is a problem. I have also seen multiple hits to this blog, with "counter not working" in the query, which is another clue that multiple people are having the problem.
Since the counter is not something we can manipulate with css or html, I can not offer any sort of fix.
But may I suggest that you ditch their counter and install your own.

Sep 7 2007: online now icon returns to the February 2007 Code. So unless you have the very old online now icon code, your custom icons should work as they did prior to a few days ago. (Those are really just permanent icons anyway unless you used my code for this, or someone else really has a solution, that I have not found yet.)

Sep 5 2007: online now icon changes.
First:
If you have installed code to resize images in comments, to control width, this code is probably effecting the size of the online now icon (it may be huge in IE).
You can fix this by adding this line:

<style>
table.friendsComments div img {width:80px; height:20px;}
</style>


If you had the icon hidden, and still want it such do this:

<style>
{!-hide online now icon everywhere in profile-!}
table.friendsComments div img {display:none;}
table.friendSpace div img {display:none;}
table.profileInfo div img {display:none;}
</style>

Or if you don't want to mess with the spacing of stuff, this might be better:
<style>
{!-hide online now icon everywhere in profile-!}
table.friendsComments div img {visibility:hidden;}
table.friendSpace div img {visibility:hidden;}
table.profileInfo div img {visibility:hidden;}
</style>

If you want a custom online now icon, which is there only when you are online;
Well good luck. I had one for the old strategy, but I think I was the only one who used it.
I might try to figure it out for the new strategy, but I don't expect this new strategy to last very long.
I expect it to have security issues. (I will not be the one to exploit them).

If you just want an image, to display in the location of the online now icon, and have nothing to do with one's actual online status.

<style>
table.profileInfo table div {width:89px !important; height:28px !important; background: url("http://i15.tinypic.com/61vugio.gif");
background-position: center center;
background-repeat: no-repeat;}
table.profileInfo table div img {display:none}
</style>

Of course you can replace the image with a different one.
Just don't get one that actually says "online now"
change the height and width to match the image you choose.

If you want to replace the images in the friend and/or comment spaces, just repeat the above block, and replace table.profileInfo with
table.friendsComments
and/or
table.friendSpace
or just add them to the existing line.
Personally, since the image is always there, I wouldn't do that. I would just hide it in those spaces.

To see how the space to display the icon is structured:
(It is times like this when I am glad I have a dynamic drawing to show me how the page is structured:)
MySpace Page Showing Structure

Notice, even when not online the structure is there. It is under each friend image as well (in both friend and comment spaces).
Notice that it is now in a div, and that the div (with some image inside it) is there even if not online.
They use a clear gif if the user is not online.
So there is always a gif there, the choice the code makes, is which gif.



Aug 2 2007: Yes stuff changed last night (or early this morning). The Ad Banner problem is there even if profiles with NO customizations at all. This can not be caused by our customizations.

Update: This was fixed by the end of the day Aug 2. (I observed some interesting changes during the course of the day, as they attempted to fix the problem.)

July 11 2007: myspace introduced another round of changes.

IF you have the following problems, related to the newest changes, they can be easily fixed:

1) Your Meet, Friend, Calendar and/or Comment section is Gone (It is now hidden when it was not a few days ago)

[Update July 14 2007] This now only effects the Meet space. Myspace put back the end style tag at the end of the meet section. (I knew they would, and it has nothing to do with fixing people's page who failed to close their own style blocks).

2) Your Fonts in your Blogs, About Me, Meet, Networking, Companies are no longer as you had them set.

3) Your Div Overlay is Gone

Related to (1);
They removed the close style blocks at the end of the About and Meet sections.
If you did not close your own style blocks, you are now exiting the Meet and/or About sections with an open style block. This means that the myspace code, after this point, thinks it is inside the style block. This prevents it from working.

Fix:
Add a close style tag at the end of your About and/or Meet section (try both, it is harmless if it has no open tag).
This should un-hide anything which was hidden due to no close style tag.

Related to (2);
This one is caused by the addition of a span assigned to class text.

This can effect your fonts in multiple ways.
A) Your font may have taken on the style set in the linked style sheet (the one they pull in that is not in the code you see when you do a view source); which sets the style for class text.
If you have this font:
{ font-family:arial; color:ffffff; font-size:12px; }
Likely it is coming from this style sheet.

B)IF you have a different font, besides the one above, and it is not the font you had prior to the change; the likely cause is another style command in your own code.

Look for any style set using
.text
If you find this change it to td.text

Once you make that change, the text may now take on the font style shown above (coming in from the style sheet).

Now add the needed style command

You can do this multiple ways.

Fix
The best fix may be to just add in the style commands you need.

i.e.
table.blurbs span.text {your font stuff in here}
table.latestblogentry span.text {your font stuff in here}
table.userProfileCompany span.text {your font stuff in here}
table.userProfileNetworking span.text {your font stuff in here}

Example:
table.blurbs span.text {font-family:tahoma !important; font-size:13px !important}

You may (or may not) need to use the !important.
It depends on what you have currently setting the font.

IF they are all the same font, you can just do this:
span.text {font-family:tahoma !important; font-size:13px !important}

Trouble shooting idea
If you are having trouble finding the line of code that is setting your font, try doing this:
Find every line where you set a font.
One at a time, set the font color to hotpink and the size to 26. Save and view the page. See how it effects your page.
If doing this (to all your font set commands) does NOT effect the font you are trouble shooting, then it is likely being set from the style sheet.

Try inserting this at the top of the About and/or Meet
</span>
AND put this at the bottom:
<span>

This will take the Section out of the span class text.


Related to (3).
This is similar to (2).
The cause is the same.
In this case you may have in your code, something designed to hide stuff of class text.
You may have used a shortcut syntax, and instead of indicating
td.text
you may just have
.text

This will now effect all of the stuff recently added to span class text.
If it is hidden, you will not see it.

It is probably safe to go through your code and replace
.text
with
td.text
(because span.text was not introduced until July 11, I am certain that everywhere you had .text, prior to July 11, was meant to apply only to td.text).

OR
you may have hidden something using span

If you have any lines with
{display:none}
or
{visibility:hidden}
which have span listed as an effected element.

i.e.
xxx, yyy, zzz, span, jjj {display:none}
where xxx, yyy, zzz, jjj can be almost anything.
It may also be something like this
table table table span
or
td td td span
or table table td span
etc
If span is listed, and you are rendering the block {display:none} or {visibility:hidden} it can potentially hide anything in your about or meet sections.


Some other things you can do:
If the problem is only effecting the About and/or Meet sections you can just close the span tag at the top of the effected area:
</span>



Now for the Good:
More new classes.

We now have all of these classes:
profileInfo
NameText
contactTable
userProfileURL (new)
InterestsAndDetails (new behavior, now only assigned to Interests)
userProfileDetails (new)
userProfileSchool (new)
userProfileCompany (new)
userProfileNetworking (new)

extendedNetwork
latestBlogEntry
Blurbs
friendSpace
friendsComments

tdborder (new, assigned at the td level, in some cases td has both this class and class text)

text (now used as a span class as well as a td class)

whitetext12
lightbluetext8
orangetext15
blacktext10
blacktext12
whitelink
btext
redbtext
redlink

For a picture of the page, showing where each class is:
My Space Page showing Table Layout and Classes
The above is an actual myspace page with style commands inserted to show div, table, cell layout and classes.
It will automatically update when myspace makes changes to either the div/table/cell structure, use of span, or any of the classes that now exist.
(New classes will not show up as new classes unless I add style commands).

The text with the coral (salmon) colored background, is in span.text (meaning it is between span tags and the span is assigned to class text)
This is new, this text has style set in one of the style sheets that is pulled in when the code runs.
It is not set to !important in that style sheet.
You can override it with your own style command, as long as you address it correctly.
It will not override with just span
It will override with span.text

Still no class for the Calendar, one would be really nice.

Thank you for Visiting; Have a Nice Day :-)

Queries hitting other pages of mine, which should be hitting this page:
-did myspace change their code today?
-How do I hide that new shortcuts thing that just showed up
-How do I hide the short cut box on myspace
-codes to hide the shortcut links on myspace