Friends / Comments Help in DIV Layout Options

[f1reman]

I'm almost done with my profile, but I'm having a couple problems:

1. "All/Online/New" links in "Friends" section are the wrong color
2. "Displaying X of X comments" in "Comments" section are the wrong color
3. Time/Date for each comment in "Comments" section is the wrong color
4. My "Comments" section stretches all the way to the bottom of the screen, and I'd like to raise the bottom of the box up a little bit

It's a 1.0 profile, and everything is arranged PERFECTLY, except for those 4 things above. Please help!

Here's the relevant code:

About Me:

CODE

.friends
{
position:absolute;
top:1190px;
margin-top:20px;
background-color:000000;
height:40px;
width:794px;
padding:14 15 7 27px;
color:DDDDDD;
}

.friendSpace
{
width:794px;
position:absolute;
margin-left:-568px;
top:1417px;
padding:0 15 0 27px;
background-color:000000;
}

.comments
{
position:absolute;
top:1507px;
margin-top:20px;
background-color:000000;
height:40px;
width:794px;
padding:14 15 7 27px;
color:DDDDDD;
}

.friendsComments
{
width:794px;
position:absolute;
top:1743px;
margin-left:-567px;
background-color:000000;
color:DDDDDD;
}

Who I'd Like to Meet:

CODE

<div class="friends">
<h2>My Friends</h2>
</div>

<div class="comments">
<h2>Comments</h2>
</div>

NOTE: I created my own headings (.friends, .comments) to hide the default headings for those two sections. Each section is a black box, and the background of the page is gray.

Any help is GREATLY appreciated!

[f1reman]

I stripped my profile down, to better illustrate the problem.

About Me:

CODE

<style>

table, tr, td {background-color:transparent; border:0px;}
div.profileWidth table td { background-color: 000000; !important; background-image: none !important; }
div.profileWidth div ul li a {font-size: 11px !important;}
div.profileWidth div ul li a:hover, div.profileWidth div ul li .open {font-size: 11px !important;}
div.profileWidth div td.rail{background-color: 000000 !important;}
div.profileWidth table td ul small {font-size: 8px !important;}
div.profileWidth table tr td div table.rail {background-color: 000000;}

body table tr table tr td.text table tr td.text table tr td table tr td {color:DDDDDD;}

.main
{
position:absolute;
left:50%;
top:176px;
z-index:1;
margin-left:-401px;
padding:0;
border:0;
background-color:DDDDDD;
}

body
{
background-color:DDDDDD;
}

tr
{
background:transparent;
}

a:link,a:visited
{
text-decoration:underline;
color:DDDDDD;
}

a:hover
{
text-decoration:none;
color:DDDDDD;
}


img
{
border:none;
}

.content
{
position:absolute;
top:0px;
margin-top:20px;
background-color:000000;
height:1000px;
width:794px;
padding:14 15 7 27px;
color:DDDDDD;
}

.friends
{
position:absolute;
top:1020px;
margin-top:20px;
background-color:000000;
height:40px;
width:794px;
padding:14 15 7 27px;
color:DDDDDD;
}

.friendSpace
{
width:794px;
position:absolute;
margin-left:-567px;
top:1232px;
padding:0 15 0 27px;
background-color:000000;
}

.comments
{
position:absolute;
top:1327px;
margin-top:20px;
background-color:000000;
height:40px;
width:794px;
padding:14 15 7 27px;
color:DDDDDD;
}

.friendsComments
{
width:794px;
position:absolute;
top:1563px;
margin-left:-567px;
background-color:000000;
color:DDDDDD;
}

.redlink, .friendlink, .friendtext {color:DDDDDD!important;}
.friendsComments td.text td b, .redtext {color:DDDDDD!important;}
.blacktext10 {color:DDDDDD!important;}

</style>

Who I'd Like to Meet:

CODE

<div class="main">
<table style="width:800px;
height:800px;
cellpadding:0px;
cellspacing:0px;
background-color:DDDDDD;">
<tr><td valign="top">

<div class="content">
stuff
</div>

<div class="friends">
<h2>My Friends</h2>
</div>

<div class="comments">
<h2>Comments</h2>
</div>

</td></tr></table></div>

<div style="position: relative;
height: 400px;
overflow: hidden;
border: 0px;">

I'd like to get the "normal" Myspace copyright info back at the bottom of my profile, but the "Comments" section stretches all the way to the very bottom of the page, hiding it. Help?