MySpace Band Shows; Styling, hiding, displaying

Band Page Shows, Styling, Hiding, Displaying on a Div Overlay

The following diagram shows the band page show section.
To see how this fits into the complete page, see this:Structure, Div/Table/cell layout of the myspace band page

The below diagram is an extract, of the div containing the shows, from the diagram I link to above. The Div (which is the outer structure in this diagram) is two tables deep and in the cell which makes up the right column. This cell is in class td.text
This div, can be addressed as
table table td.text div

Div (no class) Table (No Class) td (no class) td.text span.whitetext12 span.whitelink a (link)

A Font Tag is used, which my above diagram down not show. I do show it in the below diagram where I apply styling.

Unless you have added a custom div, to the right column, the only other div elements, effected by the address
table table td.text div
are
1) the empty div in the friendSpace
2) The div of class commentlinks in the comment space
3) The div around the music player (which only showed up recently)

The "Upcoming Shows" header is in class whitetext12.
It is the ONLY element addressed like this:
div table td.text span.whitetext12
(I took a shortcut and started with the div. This can be done if you are certain it is not causing an additional conflict which would not otherwise occur).

If I wanted to be more explicit, thus reducing the potential of conflict I would not leave any layers out of my address:
table table td.text div table td.text span.whitetext12

Leaving out the td between the first two tables does not add any additional risk, since it has no class assigned, and there is ALWAYS a td between two table layers. I leave out the tr for the same reason. It is only when it has a class assigned that it may add value to include it.

The below block styles the shows to look like this:

Notice the use of font. One thing my previous diagram missed was the use of the font tag. I did need it in the below style block to get the above.

<span class="off">!-Style Shows-!</span>
<style>
{!-Border around shows table-!}
table table td.text div table {border:3px solid; border-color:magenta;}
table table td.text div table table {border:none;}
{!-background of most of the shows space-!}
table table td.text div table td {background-color:pink; }
{!-form inner borders with background color-!}
table table td.text div table table {background-color:maroon ;}
table table td.text div table table table {background-color:transparent;}

{!-style text-!}
table table td.text div table table td.text span.whitetext12 {color:blue !important; font-size:13px !important;}

table table td.text div table table a {background-color:yellow; color:hotpink}
table table td.text div table table span.whitelink {background-color:PaleVioletRed ; border-bottom:2px PaleVioletRed  solid;}

table table td.text div table table span.whitelink a {color:purple  !important; background-color:mistyrose !important;}

table table td.text div table table table font{color:green !important; font-size:11px; font-weight:bold}

table table td.text div table table font {color:DarkBlue !important; font-family:Impact !important; font-weight:bold; font-size:12px}

</style>
<span class="off">!-END Style Shows-!</span>

Putting Shows in a A Scroll Box
I no longer recommend doing this at all, due to the div around the music player.
It is not impossible, but I am not sure it is worth it.

In non IE browsers it is really easy
IE is more of a problem.

note to self: write an app to hold the shows, to solve this problem.