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