In an effort to consolidate my blog content, onto one blog, the content which was on this page has been moved:
Hide Friends and/or Comments simple code blocks
Hide only 1 (the first one) Comment
Friday, May 18, 2007
Band Page Div Overlay Starting Point
The content which was in this article has been moved
mySpace Band Div Overlay
mySpace Band Div Overlay
Artist Page Maroon Nav Bar
The code which was here is now being maintained here:
Maroon Navigation Menu Artist Pages (Band/Music and Film)
Maroon Navigation Menu Artist Pages (Band/Music and Film)
Preparing for a Div Overlay. Hiding the default Myspace Page.
The content which was in this article has been moved here:
MySpace Simple Div Overlay, Hiding Everything and Building page from a Single Image
MySpace Simple Div Overlay, Hiding Everything and Building page from a Single Image
Eliminating Excess White Space
I am declaring this blog obsolete.
This does not mean that the code does not work, it means I am no longer going to maintain it.
Due to excessive spam, I am also turned off comments.
Please see the following blog for updated content:
Eileen's main blog
Eliminating Excess White Space on your MySpace Page
A lot of the queries hitting my various myspace blogs are looking to remove white space.
Some want to remove the space between the tables.
Others have whitespace issues, like a bunch of extra white space at the bottom of the page.
To remove the extra space between the main tables do this:
Most (not all) of the space is caused by Carriage Returns.
The next one will control the height of a carriage return within the main content tables.
If you have a bunch of extra white space at the bottom, the solution depends on the cause.
Some likely causes:
1) Use of relative movement up, without adjusting the bottom margin.
If you have anything in your code like this
position:relative; top:900px
(the 900 could be any number)
And you do NOT also have this: margin-bottom:-900px
It will cause a 900px whitespace problem at the bottom.
i.e. you should have
{position:relative; top:900px; margin-bottom:-900px}
2) Use of {visibility:hidden}.
This renders the element invisible, not gone.
Try using
{display:none}
it will render the element gone.
But be careful.
This only works if you do NOT want to render visible, and item within the element.
i.e. if I render
table.profileInfo {display:none}
I can NOT then do this:
table.profileInfo td img {display:block}
However if I render
table.profileInfo {visibility:hidden}
I can then do this:
table.profileInfo td img {visibility:visible}
But if you are hiding an entire section, and do not want to display anything within that section, use {display:none}
I Have code for hiding most page elements, that eliminates the space the element occupied.
See my index.
If you do not want to dig through your code, to find the code you used to hide something, and you want to remove the space the item left behind, you can add code to eliminate the space.
Now that each of the main content table is in its own class (the calendar being the only exception) they can be very easily hidden.
i.e.
You can find all the classes Page Layout
About a third down the page is a picture of the page, with all the classes color coded.
To the right is a key, and each class is listed there.
The diagram shows the area you will remove if you use the above code block for that class.
If you use the code I have to remove all the space between the tables, and then remove all the tables, one would think the page would be completely empty.
But there is some other junk in there, some table cells at levels higher then the main content which have nothing but maybe a border or background, and maybe a clear gif inside.
To really eliminate everything see Removing all of the myspace page content
This does not mean that the code does not work, it means I am no longer going to maintain it.
Due to excessive spam, I am also turned off comments.
Please see the following blog for updated content:
Eileen's main blog
Eliminating Excess White Space on your MySpace Page
A lot of the queries hitting my various myspace blogs are looking to remove white space.
Some want to remove the space between the tables.
Others have whitespace issues, like a bunch of extra white space at the bottom of the page.
To remove the extra space between the main tables do this:
<style>
{!- control amount of space the Carriage Return creates between main tables-!}
table table br {line-height:2px}
{!- undo above effect within main content tables -!}
table table table br {line-height:10px;}
</style>
Most (not all) of the space is caused by Carriage Returns.
The next one will control the height of a carriage return within the main content tables.
If you have a bunch of extra white space at the bottom, the solution depends on the cause.
Some likely causes:
1) Use of relative movement up, without adjusting the bottom margin.
If you have anything in your code like this
position:relative; top:900px
(the 900 could be any number)
And you do NOT also have this: margin-bottom:-900px
It will cause a 900px whitespace problem at the bottom.
i.e. you should have
{position:relative; top:900px; margin-bottom:-900px}
2) Use of {visibility:hidden}.
This renders the element invisible, not gone.
Try using
{display:none}
it will render the element gone.
But be careful.
This only works if you do NOT want to render visible, and item within the element.
i.e. if I render
table.profileInfo {display:none}
I can NOT then do this:
table.profileInfo td img {display:block}
However if I render
table.profileInfo {visibility:hidden}
I can then do this:
table.profileInfo td img {visibility:visible}
But if you are hiding an entire section, and do not want to display anything within that section, use {display:none}
I Have code for hiding most page elements, that eliminates the space the element occupied.
See my index.
If you do not want to dig through your code, to find the code you used to hide something, and you want to remove the space the item left behind, you can add code to eliminate the space.
Now that each of the main content table is in its own class (the calendar being the only exception) they can be very easily hidden.
i.e.
<style>
table.ClassName{display:none !important}
</style>
You can find all the classes Page Layout
About a third down the page is a picture of the page, with all the classes color coded.
To the right is a key, and each class is listed there.
The diagram shows the area you will remove if you use the above code block for that class.
If you use the code I have to remove all the space between the tables, and then remove all the tables, one would think the page would be completely empty.
But there is some other junk in there, some table cells at levels higher then the main content which have nothing but maybe a border or background, and maybe a clear gif inside.
To really eliminate everything see Removing all of the myspace page content
Hiding the Bottom Links and Grey Space
Hide Bottom Links, CC thing, and Grey (or is it Gray?) Space
Hide the bottom links and get rid of the Grey (Keep the cc thing):
However, if I am going to display:none at one level, and undo it at another level, I have to choose either inline or block.
<style>
{! hide bottom links http://spiff-myspace.blogspot.com -!}
table div {display:none}
{! bring back stuff we do not want to hide; ad banner; url -!}
div table div {display:block;}
table table div {display:block;}
{! additional line if you have a custom div !}
table div.YourCustomDivName {display:block}
</style>
Hide the bottom links and get rid of the Grey (Keep the cc thing):
<style>
{!- ditch bottom links leave cc; http://spiff-myspace.blogspot.com -!}
table div div {display:none}
div table div div {display:block;}
table div div table {display:block;}
{!- gray background; effects url -}
table tr {background-color:transparent;}
</style>
<style>
table.userProfileURL table tr {background-color:white}
</style>
However, if I am going to display:none at one level, and undo it at another level, I have to choose either inline or block.
Ad banner Hidden, Vanishing Ad Banner
The Vanishing Ad Banner
If your ad banner is hidden, and you did not intentionally install code to hide it, your page may have fallen victim to what I call "The Vanishing Ad Banner".
(If you don't care much about the reason it is hidden, and just want to unhide it, scroll down.)
The symptom behaves as follows:
- The ad may start to show up, and go away as the page paints
- If you turn off style, pieces of the ad can be seen in the small box off to the left.
- In some cases the ad is always hidden, in others it is hidden only some of the time (yesterday my tests showed only about 25%, but other days it is as much as 50%)
There is code being given out (on multiple web pages and in the myspace discussion forum), to hide the bottom links, which is hiding the advertisements.
Some versions of the code only hid about the half the ads prior to a change made in early June, but now hide All the ad banners. Another version of the code currently hides about half of the ad banners.
I have been watching this symptom since early May.
I have learned that there are MULTIPLE CODE PATHS which myspace takes, when generating the code to display the ad banner. This is why the behavior may seem random.
The guilty code lines:
table div {display:none} or {visibility:hidden}
div div {display:none} or {visibility:hidden}
table div div {display:none} or {visibility:hidden}
other forms of these lines may include tr and/or td after table
i.e.
table tr td div
table tr div
table td div
table tr td div div
table tr div div
table td div div
body table div div
body div div
body div div div
If you have any of the above, with either {display:none} or {visibility:hidden} you are potentially hiding all or some of the myspace advertisements. This does put you at risk of having your myspace page deleted.
The reason this code hides the ad banner is because the myspace generated code sometimes places the ad banner at level
div table div (or div table tr td div or div table td div)
And other times places the ad at this level:
div table div div (or div table tr div div or div table td div div or div table td tr div div}
For demonstration purposes, I added style commands, to show the following levels:
div {border:4px hotpink dashed; margin:4px;}
table {border:3px green solid; margin:4px;}
td {border:4px blue dotted; margin:4px;}
table {background-color:transparent;}
I then took a screen shot of the ad banner area:
Notice that the ad banner is located at level div table td div
In the below example, I made a copy of the code, and changed the following line, to include a red dashed border. This is to show exactly which line of code this inner div is coming from:
Now comes the mystery,
When did the above line of code show up? It was NOT there in Mid May when I took a code snapshot (at least not in my snapshot), but the symptom, of the vanishing ad banner, was clearly there in early and mid May.
At that point in time I was baffled by the symptom, which is why I ran so many tests. Then on June 5th, as I was testing I noticed the line of code, I show above (using the red dashed line). But the symptom was there, BEFORE that line of code ever showed up.
Then (while testing something else, not related to the ad) I noticed this:
The style block used here is:
div {border:4px hotpink dashed; margin:6px;}
table {border:3px green solid; margin:6px;}
table {background-color:transparent;}
Notice that we are now showing the ad banner at this level:
div table div div
To verify this, I added this line of code to my style block:
div table div div {border:4px yellow dashed; margin:5px;}
Now I have this in the style block:
div {border:4px hotpink dashed; margin:4px;}
table {border:3px green solid; margin:4px;}
table {background-color:transparent;}
div table div div {border:4px yellow dashed; margin:5px;}
I refreshed, and got this:
The ad changed, but it clearly shows that the ad is inside the yellow dashed area.
So I made a copy of the code, with the intent of putting in some of my own trouble shooting lines. To my surprise, the code I got a snapshot of, was DIFFERENT than the code I had been looking at only a few minutes prior (when I could not see the div layer I now show in yellow, in the code).
In this case I clearly saw the div layers, in the code, which were showing in the diagram:
I changed the code as follows (adding borders where I have the code shown in bold)
I then went back to the default myspace code and proceeded to run several tests. The tests were not consistent. Sometimes the ad would show up at level div table div
and other times at level div table div div.
Each time I saw the ad banner at level div table div div I saw the code showing all three divs. Each time I saw the ad banner at level div table div I saw the code showing only the two divs.
I saw the SAME ad show up in both conditions. Sometimes I would get one version of the code, sometimes the other.
How To Fix the Vanishing Ad Problem
If you have the guilty code line, and you want to insure your ad banner displays, remove the line of code.
Search for any of the lines I show above (and the ones I show below).
If you were using the line of code to hide the bottom links, and you still want to hide your bottom links, use this instead:
(I moved this code)Hide Bottom Links, Get Rid of Grey Background
Some other lines of code which will inhibit the display ability of some (or all) advertisements (These are less common than those above, and some of these are more often used to intentionally hide the ad banner):
div table td {display:none}
div table td {visibility:hidden;}
div table {display:none} or {visibility:hidden;}
table {display:none} or {visibility:hidden;}
div {display:none} or {visibility:hidden;}
td {display:none} or {visibility:hidden;}
tr {display:none} or {visibility:hidden;}
table tr {display:none} or {visibility:hidden;}
table tr td {display:none} or {visibility:hidden;}
div table tr td{display:none} or {visibility:hidden;}
.. any of the above with the word body before them (all of this is in the body).
... (anything which can effect level div table tr td OR div table tr td div)
If you can not find the line of code causing the problem, and just want code to override it; Here is a block of code which should work.
This code overrides multiple forms of the guilty code. Likely you don't need this much code, but having the extra code is harmless.
If anyone is wondering why I don't inform those, who are giving out the code which is causing the problem, I really have tried. In late May I began posting my findings to any forum where I found the guilty code.
I first posted the fix to the myspace customizing forum in Mid May.
The thread was quickly buried as were all others where I attempted to report the symptom. I had even asked the moderators to make a sticky thread, and they deleted my post. Then later someone else got it made into a sticky thread, and pointed to someone else's fix. That fix still hid the ad banner 50% of the time, and I attempted to post to that sticky thread, and that post was deleted by the moderators.
Only one of the sites I reported the information to, took me seriously. The site is joyboner.com
[Update June 30: I just checked the two main sites, being given out in the customizing forum. Both have updated their code (the code which hides the bottom links) to use the fix I gave out in Mid May.]
[Note: Aug 1 2007: The symptom which showed up on 1 Aug was cleaned up by that evening. However, during the day, as the myspace engineers attempted to fix the problem, I noticed some interesting things. The code, which generates the ad banner on the div div path, moved 3 or more times. At one point it was moved to the bottom. At another point, the actual ad showed up on the bottom, but only if I turned off style. )
If your ad banner is hidden, and you did not intentionally install code to hide it, your page may have fallen victim to what I call "The Vanishing Ad Banner".
(If you don't care much about the reason it is hidden, and just want to unhide it, scroll down.)
The symptom behaves as follows:
- The ad may start to show up, and go away as the page paints
- If you turn off style, pieces of the ad can be seen in the small box off to the left.
- In some cases the ad is always hidden, in others it is hidden only some of the time (yesterday my tests showed only about 25%, but other days it is as much as 50%)
There is code being given out (on multiple web pages and in the myspace discussion forum), to hide the bottom links, which is hiding the advertisements.
Some versions of the code only hid about the half the ads prior to a change made in early June, but now hide All the ad banners. Another version of the code currently hides about half of the ad banners.
I have been watching this symptom since early May.
I have learned that there are MULTIPLE CODE PATHS which myspace takes, when generating the code to display the ad banner. This is why the behavior may seem random.
The guilty code lines:
table div {display:none} or {visibility:hidden}
div div {display:none} or {visibility:hidden}
table div div {display:none} or {visibility:hidden}
other forms of these lines may include tr and/or td after table
i.e.
table tr td div
table tr div
table td div
table tr td div div
table tr div div
table td div div
body table div div
body div div
body div div div
If you have any of the above, with either {display:none} or {visibility:hidden} you are potentially hiding all or some of the myspace advertisements. This does put you at risk of having your myspace page deleted.
The reason this code hides the ad banner is because the myspace generated code sometimes places the ad banner at level
div table div (or div table tr td div or div table td div)
And other times places the ad at this level:
div table div div (or div table tr div div or div table td div div or div table td tr div div}
For demonstration purposes, I added style commands, to show the following levels:
div {border:4px hotpink dashed; margin:4px;}
table {border:3px green solid; margin:4px;}
td {border:4px blue dotted; margin:4px;}
table {background-color:transparent;}
I then took a screen shot of the ad banner area:
Notice that the ad banner is located at level div table td div
In the below example, I made a copy of the code, and changed the following line, to include a red dashed border. This is to show exactly which line of code this inner div is coming from:
<div id="ctl00_Header_Header1_bannerAdEmitter1_ctlGoogleAdEmitter"
name="ctl00_Header_Header1_bannerAdEmitter1_ctlGoogleAdEmitter" style="border:4px red dashed; magin:5px;">
Now comes the mystery,
When did the above line of code show up? It was NOT there in Mid May when I took a code snapshot (at least not in my snapshot), but the symptom, of the vanishing ad banner, was clearly there in early and mid May.
At that point in time I was baffled by the symptom, which is why I ran so many tests. Then on June 5th, as I was testing I noticed the line of code, I show above (using the red dashed line). But the symptom was there, BEFORE that line of code ever showed up.
Then (while testing something else, not related to the ad) I noticed this:
The style block used here is:
div {border:4px hotpink dashed; margin:6px;}
table {border:3px green solid; margin:6px;}
table {background-color:transparent;}
Notice that we are now showing the ad banner at this level:
div table div div
To verify this, I added this line of code to my style block:
div table div div {border:4px yellow dashed; margin:5px;}
Now I have this in the style block:
div {border:4px hotpink dashed; margin:4px;}
table {border:3px green solid; margin:4px;}
table {background-color:transparent;}
div table div div {border:4px yellow dashed; margin:5px;}
I refreshed, and got this:
The ad changed, but it clearly shows that the ad is inside the yellow dashed area.
So I made a copy of the code, with the intent of putting in some of my own trouble shooting lines. To my surprise, the code I got a snapshot of, was DIFFERENT than the code I had been looking at only a few minutes prior (when I could not see the div layer I now show in yellow, in the code).
In this case I clearly saw the div layers, in the code, which were showing in the diagram:
I changed the code as follows (adding borders where I have the code shown in bold)
<div align="center" style="border:4px black dashed; margin:5px;">
<table width="800" border="0" align="center" cellspacing="0" cellpadding="0" bgcolor="003399">
<tr>
<td id="headerBanner" style="height:96px; text-align:center; vertical-align:text-top;">
<span id="ctl00_Header_Header1_bannerAdEmitter1_ctlGoogleAdEmitter"><!-- CMS:00000000-0000-0000-0000-000000000000: -->
</span>
<div style="height:90px; border:3px red dashed; margin:4px;"><div id="tkn_leaderboard" style="border:3px purple dashed; margin:4px;"></div></div>
I then went back to the default myspace code and proceeded to run several tests. The tests were not consistent. Sometimes the ad would show up at level div table div
and other times at level div table div div.
Each time I saw the ad banner at level div table div div I saw the code showing all three divs. Each time I saw the ad banner at level div table div I saw the code showing only the two divs.
I saw the SAME ad show up in both conditions. Sometimes I would get one version of the code, sometimes the other.
How To Fix the Vanishing Ad Problem
If you have the guilty code line, and you want to insure your ad banner displays, remove the line of code.
Search for any of the lines I show above (and the ones I show below).
If you were using the line of code to hide the bottom links, and you still want to hide your bottom links, use this instead:
(I moved this code)Hide Bottom Links, Get Rid of Grey Background
Some other lines of code which will inhibit the display ability of some (or all) advertisements (These are less common than those above, and some of these are more often used to intentionally hide the ad banner):
div table td {display:none}
div table td {visibility:hidden;}
div table {display:none} or {visibility:hidden;}
table {display:none} or {visibility:hidden;}
div {display:none} or {visibility:hidden;}
td {display:none} or {visibility:hidden;}
tr {display:none} or {visibility:hidden;}
table tr {display:none} or {visibility:hidden;}
table tr td {display:none} or {visibility:hidden;}
div table tr td{display:none} or {visibility:hidden;}
.. any of the above with the word body before them (all of this is in the body).
... (anything which can effect level div table tr td OR div table tr td div)
If you can not find the line of code causing the problem, and just want code to override it; Here is a block of code which should work.
This code overrides multiple forms of the guilty code. Likely you don't need this much code, but having the extra code is harmless.
<style>
div table div,
div table div div,
div table td div,
div table td div div,
body div table div,
body div table div div,
body div table div {visibility:visible !important; display:block !important}
</style>
If anyone is wondering why I don't inform those, who are giving out the code which is causing the problem, I really have tried. In late May I began posting my findings to any forum where I found the guilty code.
I first posted the fix to the myspace customizing forum in Mid May.
The thread was quickly buried as were all others where I attempted to report the symptom. I had even asked the moderators to make a sticky thread, and they deleted my post. Then later someone else got it made into a sticky thread, and pointed to someone else's fix. That fix still hid the ad banner 50% of the time, and I attempted to post to that sticky thread, and that post was deleted by the moderators.
Only one of the sites I reported the information to, took me seriously. The site is joyboner.com
[Update June 30: I just checked the two main sites, being given out in the customizing forum. Both have updated their code (the code which hides the bottom links) to use the fix I gave out in Mid May.]
[Note: Aug 1 2007: The symptom which showed up on 1 Aug was cleaned up by that evening. However, during the day, as the myspace engineers attempted to fix the problem, I noticed some interesting things. The code, which generates the ad banner on the div div path, moved 3 or more times. At one point it was moved to the bottom. At another point, the actual ad showed up on the bottom, but only if I turned off style. )
Subscribe to:
Posts (Atom)
