myspace table section spacing

Controlling the Space between Sections on a MySpace Page

Quick links if you do not want to read through explanations of how the code works:
Control of Vertical Spacing by replacing Carriage Returns between tables with margins.
Control Horizontal Spacing by Removing clear Gif files and Using margins
Horizontal Spacing, increasing/decreasing distance between columns by sizing clear gif spacer
Shift Right Column Further Left
Shift Left Column Further Left
Place a Border Around Center Table Only.
Place a Background for Center TAble Only.
Shift entire page Right Creating whitespace to the Left
Shift entire page Left Creating whitespace to the Right

IF you are someone html and/or css knowledgeable, viewing the following myspace page, will help you to better understand this article.

MySpace page showing table and class boundaries
Band Page showing table and class boundaries

The spacing between columns and tables (which make up each section) is created with a combination of
BR tags (carriage returns)
clear gif files
padding
empty forms
empty table cells (which often contain either a hard set size or padding).

One of the first things I do, when I am customizing a profile, is to take control of the spacing, between the columns, and between the tables.

To do this, I REMOVE the clear gif spacers, and the Carriage Returns between the tables.
I then add in my own margin commands, to control the space.
This allows me to align my top tables, so they line up.

MySpace was not consistent. The right column, has one more Carriage Return on the top, than the left column.
There is also an extra carriage return, after the music player (there are two instead of only one).

Carriage returns do NOT size the same, from browser to browser. In FireFox and IE you can control the size, by setting the line-height of the br tag.
However in Opera (and some versions of Safari), this does not work.
ALL of the browsers (that I test in) allowed me to remove the BR tags completely, and add in my own margins, to control spacing.

Control of Vertical Spacing by replacing Carriage Returns between tables with margins.
The code to do this, is as follows:

<a class=i href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9zcGFjaW5n">
Control or Minimize Table Spacing MySpace</a>
<style>
.i {display:none;}
{! control vertical space !}
table table br {display:none;}
table table table br {display:block;}
table table table {margin-top:13px;}
table table table table {margin-top:0px;}
</style>

Notice that the top elements, in each of the columns, is now aligned.
Notice that the space, between each section, is now the same.
You can change the 13 to the value of your choice.
You may also choose to instead of margin-top, use margin-bottom.
This will decrease the space between the navigation menu, and the main page.

Control Horizontal Spacing
The next thing I do, is remove the clear gifs, that are causing the space to the left, and the space between the two columns.
I then add in my own margins to control the horizontal spacing:

<style>
.i {display:none;}
{! control horizontal space !}
table img {display:none}
table td {width:auto;}
div table img, table table table img {display:inline !important;}
table table, 
table table table table {margin-right:0px; margin-left:0px;}
table table table {margin-left:13px; margin-right:13px;}

{! cause top blue nav bar to spread full width !}
table.navigationBar td {width:800px;}
</style>

(You can alter the value for the navigationBar, or the margins, if you choose)

Horizontal Spacing, increasing/decreasing distance between columns by sizing clear gif spacer

<a class=i href="http://spiff-myspace.blogspot.com">MySpace Code Tutorials</a>
<style>
.i {display:none;}
{! control space between columns !}
{! set below width to desired space between columns !}
table table img {width:200px;}
{! reverse effect on other images !}
table table table img, div table table img, table div table img {width:auto;}
</style>

Place a Border Around Center Table Only.
After we take control of the horizontal spacing (using the code above) it becomes much easier to place border around the main content area.
We can also place a custom background at this level.
The below code block will apply a border:

<style>
.i {display:none;}
{! border around main content area of profile !}
{! to be used with code to control horizontal spacing !}
table table {border:6px groove pink}
table table table,
div table {border:0px;}
</style>

(You can alter the width, style, or color of the border)
i.e. replace
6px groove pink
with
4px solid yellow

Place a Background for Center TAble Only.
You can also now apply a background at this level. Keep in mind this only works well if you have applied the block to control horizontal spacing.

<style>
.i {display:none;}
{! background for main content area !}
{! to be used with code to control horizontal spacing !}
table table td {background-image:url(http://i29.tinypic.com/24phweh.jpg);
background-position:top center;
background-repeat:repeat;}
table table table td,
div table td {background-image:none;}
</style>

The above can be combined with code which applies a background to the body. This allows you to have one image as your body background and ANOTHER image as the background to your main content.

To get a better idea of what I am doing above, you might want to refer to the diagram I link to near the top of this article.

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).

Shift Right Column Further Left
FIRST use the code block above to remove the Center Clear Gif
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.

Shift Left Column Further Left

<a class=i href="http://spiff-myspace.blogspot.com">
MySpace Code Tutorials by Eileen</a>
<style>
.i {display:none;}
{ remove spacing gif on left }
table img {display:none !important;}
table table img, div table img {display:block !important;}
table.profileInfo img {display:inline;}

{! control spacing on left!}
table table {margin-left:5px;}
table.navigationBar, table table table {margin-left:0px;}
</style>

Shift entire page Left Creating whitespace to the Right

<a class=i href="http://xiii.us/ms/spacing">myspace page spacing margins Code tutorials by Eileen</a>
<style>
{! create large margin on right, shift page left !}
.i {display:none}
table, div {position:relative !important; right:200px !important;}
table table, div table, table div, div div  {position:static !important;}
</style>

You can change the 200 to the desired value.

Shift entire page Right Creating whitespace to the Left

<a class=i href="http://xiii.us/ms/spacing">myspace page spacing margins Code tutorials by Eileen</a>
<style>
{! create large margin on Left, shift page Right !}
.i {display:none}
table, div {position:relative !important; left:200px !important;}
table table, div table, table div, div div  {position:static !important;}
</style>

You can change the 200 to the desired value.