Eliminating Excess White Space

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>

Adjust the line-height values until you have what you want. The first one will control the distance between the main content tables, by setting the height of the carriage return.
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>

Use the above block and replace ClassName with the name of the class, for the section you want to remove.
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