Finding a simple Counter Dilema

My Counter Dilema, Deceptive advertising.

[update: I was actually impressed with the service I got from amazing counters, once I had emailed them. This doesn't address the issue of the deception in the sponsor choices, but at least they were quick to respond to my email, and willing to help me obtain a sponsor I was comfortable using.]

I recently did a comparison of several internet counter services. I was looking for simple counters, which did NOT include tracking. These exist and often consist of a simple image file (gif or png); which is updated by the site, each time the file is accessed.
I needed counter code which would not be rejected by sites which filter out script code and many useful dynamic html commands.

Any page which started throwing pop-ups was ruled out (I have some pop-up blocking turned on, and I don't want to do any further blocking).
Any page which started sending out irritating noises was ruled out. I use my computer to listen to music.

At one point I thought I had found the perfect counter site.
The site didn't send me into pop-up hell, or make irritating noises as the pages of their competitors seemed to.
They had a good selection of counter designs, including one which looked like LEGO (my favorite toy).
They offered a simple counter option, which consisted of a simple png file, so it was not going to be rejected by myspace and other web page hosting services which reject counters with any real content to them.

Of course I understand that advertising is what makes the service free, so I accepted that I would have to take an ad with my coutner.
I did not like the initial sponsor my counter was assigned. So I selected the option to choose a new sponsor.
Selecting a sponsor is a semi-random process, where I continually select new sponsor until I get the one I want. Several came up multiple times, before the list had completed. So maybe it is random with different probabilities assigned to different sponsors.
Going through their list of sponsors, I found several I actually do business with.
I even found a sponsor, for cupons, to a site owned by the company which employs me. But I continued through the list.
At one point I thought I found the perfect sponsor, there was a choice to choose the counter site (the one I was on) as my sponsor.
I thought this would be perfect; if someone is clicking on a link, next to my counter, why not take them to a site where they can get the same counter.

So I selected the counter site, and proceeded to the step which generates the code.

What did I notice?
While my sponsor link did say "amazing counters" hidden in there was an ad for Dell Computers. My counter image (which is much larger than my sponsor link) was turned into a link to a Dell Computer site, even after I did NOT select Dell as my sponsor.
While I have no real issue with advertising Dell Computers (although it is a major competitor of the company which employs me), I did not like the sneaky way it became my true sponsor, AFTER I choose to select something else.
Why was the counter site sneaky about this? Why even have amazing counters in the sponsor list, if selecting this leads to the assignment of a different sponsor?

After realizing that my sponsor was Dell, and not amazing counters (as I had selected) I went back to the sponsor selection.
I proceeded to look for a specific sponsor I had seen earlier in the list. After HUNDREDS of clicks, it did not come up again. I was about to give up and select another sponsor, which I was ok with.
I selected ToysRUs-cupons. Did this link take me to a site associated with ToysRus? Of course not. It was a general cupon site, with Dell on the top of the list.
If one scrolled down, ToysRus cupons were available, as were several of the other companies, I had seen cupon links for in the "select sponsor" process.
In the meantime, I had become just irritated enough, that I had used the "send us a message" functionality.
I went back to the "select sponsor" and continued the process.
Eventually, it came up, what I thought was a link to the company I work for (or at least their online shopping service). Maybe I hadn't noticed the word cupon after it before, and maybe that was what I saw before.
I went ahead and tried out the link (if I was going to have this link on my site, I needed to check it out). At least it was what it claimed to be, and the first cupons offered, were for the shopping site which sells the products made by the company I work for. (The links to get Dell cupons were off to the side).


Dilema 1)

Will I continue to have amazing counters as the counter service I recommend to people?
It is still my favorite online counter service. (OK, sneaky sponsor assignment is less undesireable than pop-ups and noise).

I could write my own counter service, and offer it to those who ask me where to get counters. But not today, and it will take a significant chunk of time to come up with a variety of counter designs.

If I do decide to write my own, For the short term, do I continue to use amazing counters?
Do I continue to recommend amazing counters.?

Dilema 2)
Assuming I continue to use amazing counters;
Do I select a sponsor which offers cupons for products sold by my own employer, or a site which pushes products made by the competition?

There was a time when this answer would have been obvious to me. There was a time when I cared if the company, which employs me, did well. There was a time when if the company did well, all the employees were rewarded.
But the company has made many changes.
The company no longer treats the majority of its employees as valued assets.
No longer do the majority of the employees have any vested interest in the performance of the company. There is a new philosophy that only a small handful of employees are really adding much value at all, and the rest of us are easy to throw away and replace.
They pay me (and pretty well). I do the work I am assigned, and struggle to maintain the same level of work habits I had when I felt more valued. I owe them honest work in return for that pay. My loyalty goes no further.
But for some reason, I just don't feel right having a major competitor as my counter sponsor, although I feel free to do so.

(I know it is easy to alter the code, and remove the sponsor, but I want to stay within the terms of service, if I am going to install code from another site).

positioning and moving myspace apps

Moving, Sizing and Coloring myspace Apps

I highly recommend upgrading to myspace 2.0. In 2.0 you can position your apps by dragging then, in the provided myspace profile customize tool.

You can also address each app independently for styling.

I will add instructions here, related to how to locate the id of a single app (in myspace 2.0) if anyone is really interested.
For now I am not sure what people are interested in, and my time is limited.

The below code is still relevant for myspace 1.0 and Artist/band pages

Styling Apps, General Information and Limitations
Moving Apps, General Information and Limitations
Code Examples
Sizing Apps
Coloring a Right Side App to blend in with your profile
Move a Single Left Side App To Top Left
Move a Single Right Side App To Top Right
Move a Single Right Side App To Top Center
Move a Single Right Side App To Top Left
Move a Single Right Side App Above About Me

Styling Apps, General Information and Limitations
MySpace recently (May or June 2008) added a class to the App tables.
This makes styling them much easier, however, the apps are all still in the SAME class, therefore All Right side Apps must have the same style as each other right side apps. The same goes for Left side Apps.

All Apps can be addressed like this:
table table table.userProfileApp

Right side apps can also be addressed like this:
table table td.text table.userProfileApp

This means that we can address the right side apps independently of other elements.
We can address Left side apps, and then do an override for right side apps.

Sizing Apps
The below code block, will alter the width of ALL right side apps.
This code is useful in a skinny profile.

This will distort how some apps appear. We can resize the app container, but we have no control over the actual iframe content. If this content assumes a larger app frame size, it may distort.
This has been tested, and worked well on the truth box app on my own profile.

This code can be placed at the very top OR very bottom of the about me or to meet section.

<a class=i 
href="xiii.us/ms/moving-apps">Size MySpace Right Side Apps Code By Eileen
<style>
x.i i, .i {display:none;}
table table td.text table.userProfileApp, 
table table td.text table.userProfileApp * {width:300px !important;}
table table td.text table.userProfileApp div,
table table td.text table.userProfileApp div * {width:auto !important; }
table table td.text table.userProfileApp div div img,
table.userProfileApp div.xiii {width:6px; height:7px}
table table td.text table.userProfileApp div {height:13px !important;}
</style>
</a>

Coloring a Right Side App to blend in with your profile

<a class=i 
href="xiii.us/ms/moving-apps">Size MySpace Right Side Apps Code By Eileen
<style>
x.i i, .i {display:none;}
{! change magenta to the color you want to get the desired look !}
table table td.text table.userProfileApp {background-color:magenta !important;} 
table table td.text table.userProfileApp *,
table.userProfileApp div.x i i.i {background-color:transparent !important;}
{! you can adjust the below value as desired, depending on how much blend you want !}
table.userProfileApp {opacity:0.6; filter:alpha(opacity:60)}
</style>
</a>

Moving Apps, General Information and Limitations

- You must have ONLY ONE App on the Right, and/or One on the Left
OR
- You must be willing to move the Apps as a group.

- The App should be a static size, OR you must allow enough room for the largest size you expect the App to expand to.
(Some Apps are very dynamic in length).


Move a Single Left Side App To Top Left
Suppose I want to move a Left side App to the very top of the Left Side?
First I create space for the app, above the profileInfo table.
Then I use absolute (or relative) positioning to move the App into the space.
My first example will use absolute positioning.
Because, in this case, I am moving over elements which are very static in size, this works well.

Place this code at the top of your about me (or any other section which accepts html code)
You will need to alter the px values, based on the size of your app.

<a class=i href="http://xiii.us/ms1/">
MySpace Code and Tutorials by Eileen</a>
<style>
{! move left side app to top of left column !}
.i {display:none;}
{! create space above profileInfo for app !}
table.profileInfo {margin-top:280px;}

table table table.userProfileApp {position:absolute; top:170px; right:50%; margin-right:80px}

{!reverse effect on right side apps!}
table table td.text table.userProfileApp {position:static; margin-right:0px;}
</style>

Move a Single Right Side App To Top Right

Place this code at the Bottom of the To Meet

<a class=i href="xiii.us/ms1/">
MySpace Code and Tutorials by Eileen</a>
<style>
{! create space above main table !}
table.extendedNetwork {margin-top:400px}

.i {display:none;}
{! move right side app to top right of page !}
table table td.text table.userProfileApp {position:absolute; top:170px; right:50%; margin-right:-385px ; }
</style>

Move a Single Right Side App To Top Center
Use the Below code block, for placing a right side app top Left, and alter the margin-right value to about -225px.

Move a Single Right Side App To Top Left
Place this code at the very Bottom of the To Meet

<a class=i href="xiii.us/ms1/">
MySpace Code and Tutorials by Eileen</a>
<style>
{! create space above main table !}
table table {margin-top:400px}
.i {display:none}
{! move right side app to top left of page !}
table table td.text table.userProfileApp {position:absolute; top:170px; right:50%; margin-right:-50px ; }
</style>

Notice that the above creates a blank space to the right of the App?
This was necessary because the right side apps are wider than the left column, and one can NOT make them smaller (due to the size of the iframe inside the app, and the fact that myspace blocks any code using the keyword iframe).

A solution to this problem, is to move other elements into this location.
I like to choose elements which are reasonably static in size.
My elements of choice tend to be the Status box (the old extended network) and the contact table.
The below code will move the status Box and contact table, to the right of the App (the one I just moved to the top left).

<a class=i href="xiii.us/ms1/">
MySpace Code and Tutorials by Eileen</a>
<style>
table.extendedNetwork {position:absolute; top:170px; right:50%; margin-right:-385; width:300px; height:200px}

table.contactTable {position:absolute; top:390px; right:50%; margin-right:-385px;}
.i {display:none;}
</style>

Move a Single Right Side App Above About Me

Solution removed, new solution coming soon
You can just use the solution for placing the app top right, and adjust the values.
This does assume a static blog size (or blogs removed).

Or just use relative movement to move it up.

More Examples Coming Soon(If I think there is enough interest to make it worth my time to write them up).

Thank you for Visiting, Have a Nice day


moving myspace truth box.
Put myspace truth box on top.
Move buy your friends app on myspace.
Truth Box and buy Your friends, moving them on myspace.

MySpace code Changes, Problems, Fixes

24 February 2009
problems with code in headline:

On the the private profile, tag syntax, is being converted to the text equivalent.
This means it will show up as text, instead of behaving as tags.

I HIGHLY RECOMMEND upgrading to myspace 2.0
It has far better privacy options, including hiding last login.
Almost all customizing tasks are easy.

It is also easy (using an overlay strategy) to create a profile that looks different for friends and non friends.
Once you set it to make last-login private, you can still hide the text that says

last login:private

{! hide last login !}
li.lastlogin {display:none;}

put that in the css area

To hide the entire section, that contains the age, gender, location, last login, online icon, use the following

{! hide age, gender, location, last login, online !}
ul.profileUserInfo {display:none;}

The cool thing is, that even when users turn off style, or do a view source, they will only see that this information is set to private. They will not see the values.

So if hiding this information matters to you, you probably should switch to myspace 2.0.

I will write more about this after work today. But my guess is that someone (who does not have to work today) will have some solutions published sooner then I will.
Probably multiple people.






26 September 2008
Music Player Changes.
Depth has changed

band page:
table table td.text div div object
OR
table table td.text div div embed

Standard Page:
table table div div object
or
table table div div embed

object versus embed depends on browser.

I have not updated my code for the standard player yet, but this guy has:
Standard Player Hide
He covers both the official myspace way (which won't allow the music to play on your profile) AND the custom way, which allows the music to player on your profile.


The new music player gives users the option to add play lists, I like these.

Band Page Side Effect
If you have done anything with your shows, by addressing their div, this will now effect your band player
I highly recommend removing your shows from any scroll box.

If you want to place your shows, instead of addressing by the div, address by the table.
i.e.

table table td.text div table{ style in here }

You can address and move the music player by addressing the 2nd div
table table td.text div div {style in here}

I have updated the code here:
Band Page Music Player Hide, Move, Position, Color
But I still have more work to do.

Common problem on Standard pages
For people who have the bottom links hidden, addressing the
table div div
Remove that code, it will hide your music player.

Bug related to my music player skin code
Some versions of my code had an unDo at level
table table div div
That must be removed, now that the player is another div deep.
I added that for users who had applied custom div overlays, putting some of their custom div content at that depth.
These users will now need to insure that their custom div has a class, and apply the undo specifically to that class.

I have fixed this in my code generator.

What I plan to Fix
My music player skin generators, both standard and band to take full advantage of the new code. The bug in the standard player has been fixed.
Band player skins just got way easier.

For each blog article effected, I will remove it or update it (I haven't decided yet).

I have plans for this weekend and won't have much time to write code.

So much to do, so little time.

===============================================================================

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

myspace column spacing, centering

The Best way (that I know of) to control the spacing and positioning of the page columns, is by controlling the size of the clear gif spacers, that myspace has placed to the left of each column.

To see where these To see where these gifs reside, refer to the following real myspace pages:
Regular MySpace Page Showing Structure, Layout, Classes

Artist (Band) MySpace Page Showing Layout, Structure, Classes

Both of the above pages have keys to the left, indicating what all the colors and formatting mean.

The clear gif files, I am speaking of, have orange dotted borders (as do all images, I did not identify a class for, on the diagram).

The ones we can use, to manipulate the positioning of our profile columns are seen to the far left, and one in the center.

The spacer clear gif to the far left, does throw the profile slightly off center.
But if one considers the similar spacing to the far right (not done with a clear gif) it may actually serve to center the profile.
(I haven't quite figured out what they are doing here).

The below code block removes the clear gifs I mentioned:

<style>
td {width:auto !important}
table td img {display:none;}
table table table td img, div table td img {display:block;}
table.profileInfo table td img {display:inline;}
</style>

If you only want to remove the clear gif in the center, and not the one to the left:

<style>
td {width:auto !important}
table table td img {display:none;}
table table table td img, div table td img {display:block;}
table.profileInfo table td img {display:inline;}
</style>

If you want to decrease the space between the tables, under and above:

<style>
table table br {line-height:2px;}
table table table br {line-height:15px;}
</style>

If you find that after removing the center clear gif, you still want the right column to move further to the left, I highly recommend that instead of just using relative positioning, you first try to alter the width of the left column.

<style>
{!hard set width of left column! }
table table table {width:300px;}

{!right column set and override above!}
table table td.text table {width:450px;}

{!undo for nested tables!}
table table table table, 
table table td.text table table,
td {width:auto !important;}
</style>

It is important that no content in the tables, takes up more than the alloted space, or it will stretch the table.

Some widths which are hard set in the code will be messed up, and some formatting will be lost.
The calendar has some issues. But I think overall this override is an improvement.

myspace layout classes tables page structure

First some Basics:

Because we can not alter the mySpace code, at the point the code is actually being created we have to use the type of commands which OVERRIDE the code.
While this has lead to my learning CSS much better than I otherwise would have, this is NOT the way one would normally write code.
One would not create a table with a background color of Orange and an Orange border, and then later override this with background-color:transparent; border:none.

Within a style block one can redefine the formatting for a particular HTML tag, at a particular depth, and/or in a particular class and/or pseudo class.

A style block starts with a style tag, and ends with a close style tag
The style tag is HTML. It tells the browser to interpret the following lines as CSS instead of as HTML.

<style type="text/css">

STYLE COMMANDS GO IN HERE 

</style>

(often I am lazy and leave out the type, and so far this has worked for me. But it is a sloppy habit I should break).

To use Over Riding Style we need to know how to address the element.
This can be done with a combination of depth (parent-child relationships), style, and other html tags which identify an element.

The below picture shows the basic layout of the myspace pages.
Tables are shown with solid borders.
Cells (TD) are shown with dashed borders.
td.text is shown in red dashed
other td levels shown in black dashed
Divs are shown in thick yellow dashes.
img are shown with orange dashed borders (those very tiny images are clear gifs)

In the below picture I have rendered the following gone (so as to better show the outer structure)
table table table {display:none;}
object, embed {display:none;}

Things of Note:
- The right and left columns are cells
- The table which is one table deep has one row with 2 cells. The left most cell doesn't end up having any of our content in it, it is a spacer and contains a clear gif.
- The table which is two tables deep has one row with 3 cells. The cell in the center has no content (except a clear gif).
- The cell to the far right makes up the right column. It has a class assigned called text (unfortunately this class is used elsewhere, so while it helps with addressing it is not ideal).

The table in the center (the one holds our content)
It is 2 tables deep. It has one row and 3 cells. The leftmost cell makes up the left column of our page, the rightmost cell makes up the right column of the page.
The center column contains a clear gif spacer.

Now I will add to the picture, by removing the display none.

Instead of keeping a picture here, I have decided that I can render this image better, if I utilize a real myspace page.
I have taken a real myspace page, and have added the needed style commands to show the following:

div boundaries
table boundaries
cell boundaries
classes (assigned to cell, row, table, div, span )
other useful tags which we can utilize in our overriding style commands.

The page is best viewed in FireFox.
It does look ok in IE. However, the border spacing attribute could not be used in IE therefore I could not put as much space between the borders.
This makes it more difficult to see exactly where some boundaries are.

FireFox is Free, I recommend downloading it:
(I have a link to download firefox on my sidebar).

Below are links to myspace pages:
Regular MySpace Page Showing Structure, Layout, Classes

Artist (Band) MySpace Page Showing Layout, Structure, Classes

Both of the above pages have keys to the left, indicating what all the colors and formatting mean.

If you have any questions, you may post them here, and I will try to answer them.
(So far I have been able to answer most of the questions hitting this blog).

Later I will add some style to a film page as well, to show the same boundaries.

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

myspace page layout showing myspace classes and layering
myspace classes
explain what classes used in myspace
how can I make use of the new myspace classes

FireFox Marquee Direction Down Div Bug

Interesting FireFox Marquee Bug (or is a Feature?)

[If you are just looking for sample code, to create a marquee, I have a sample. However it is designed to demonstrate a bug. If you want it to work correctly, you might want to remove the style block at the bottom of the code block.]

While I was trouble shooting someone's mySpace profile, I came across some interesting behavior, related to FireFox and the marquee tag.
I tested the behavior outside of mySpace, so this problem is not caused by anything in the myspace code.

For some reason, when used with direction=down (or direction=up); the marquee thinks it is inside an additional div.

On the page I was troubleshooting, the marquee was in a div. It was several tables and one div deep.
The code had a style block, which had the following line:
table div div {display:none;}

Initially I thought maybe I had missed a div layer, but if that had been the case, then why did it work with direction:left.

I ended up doing several tests.

It worked fine if I used direction=left or direction=right.
It failed to show the marquee if I used direction=down or direction=up.
If I removed the style command
table div div {display:none} it worked with direction=down.

Here is some very basic marquee code. (It is a complete html block, feel free to cut and paste it into an html editor and run it.)

First, run it as it is, it should work, the marquee should move left.
Next, change left to down. It will no longer work (in FF, it is fine in IE)
Then remove the line:
div div {display:none}
It should work.
Note that the marquee is only ONE div deep.

<html>
<div class="friends" style="height:450px; width:100px">            
<h1>friends</h1>            
<marquee direction=left height=380 width=100 >
<img 
src="http://i178.photobucket.com/albums/w275/madeline_fogg/80tom.jpg" />
<br>
<img 
src="http://i178.photobucket.com/albums/w275/madeline_fogg/80-dick.jpg" />
<br>
<img 
src="http://i178.photobucket.com/albums/w275/madeline_fogg/80-harry.jpg" /></a>
<br>

</marquee>
</div>

<style>
div div {display:none;}
</style>
</html>