div positioning problems Options

[brighten]

ok this is my first div layout and I followed everything in the tutorial down to the last period.

In safari the content is at least within the borders but I would like it to be up higher, but no matter how low I go it doesn't move up?

In firefox the content just completely goes off the borders and also the text is black when it should be gray (like the links)

I can't even begin to imagine what it looks like in IE

so here is everything I'm working with...

CODE

<style type="text/css">
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style>

<style type=text/css>

body {
background-color: 5FBE95;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:FFFFFF;
scrollbar-track-color: 5FBE95;
scrollbar-shadow-color: 5FBE95;
scrollbar-face-color:FFFFFF;
scrollbar-highlight-color:5FBE95;
scrollbar-darkshadow-color:5FBE95;
scrollbar-3dlight-color:5FBE95;}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

{The actual modules}
table table table {border: 1px solid; border-color: ######; background-color: ######; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 9px arial; color:888888; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 9px arial; color:888888; font-weight:none; border:0px; text-transform: none; line-height:12px;}  

{style for the number of comments you have. The actual ..}
.redtext{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase; }

{style for the number of friends you have.}  
.redbtext{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase; }

{”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style}
.orangetext15{font-family: arial; color: 888888; font-weight: bold; font-size: 20px; letter-spacing: -2px;}  

{”General”, “Music”, “Movies”, “Television”, “Books”, “Heros”, “Status”, “Here for”, “Hometown”, “Body Type”, “Ethnicity”, “Religion”, “Sign”, “Smoke/Drink”, “Children”, “Education”, “Occupation”, and “Income” title style}
.lightbluetext8{font-family:arial; font-size:9px;  color:888888; font-weight:none;border:0px; text-transform: uppercase; }

{”Contacting”, “Interests”, “Details”, and “Schools” title styling}  
.whitetext12{font-family:arial; font-size:9px;  color:888888; font-weight:none;border:0px; text-transform: uppercase;}  

{”In your extended network” style}
.blacktext12{font-family: arial; color: 888888; font-weight: bold; font-size: 20px; letter-spacing: -2px; }

{Stylizing of your name above your picture }  
.nametext{font-family: arial; color: 888888; font-weight: bold; font-size: 30px; letter-spacing: -3px; line-height: 35px;}  

{date stamp on comments}  
.blacktext10{font-family:arial; font-size:9px;  color:888888; font-weight:none;border:0px; text-transform: uppercase;}  

{This is how all anchor points will be displayed; anchor points appear before all links.}  
a{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}

{”View all friends” and “invite more” link style}  
a.redlink{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}  
a.redlink:link{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:arial; font-size:9px;  color:888888; font-weight:none;border:0px; text-transform: uppercase;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:link{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:active{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:visited{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:hover{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}  

{Default Links}
a:link, a.man{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase; letter-spacing: 0px;}  
a:active{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}  
a:visited{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:9px; color:888888; font-weight:none;border:0px; text-transform: uppercase; }

</style>

<div class="bg" style="position: absolute; left:0px; top:163px; width:800px; height:600px; overflow: hidden;">
<img src="http://img84.imageshack.us/img84/104/myspacewn2.gif">
</div>

<div class="content" style="position: absolute; left:150px;  top:280px; width:100px; height:250px; overflow: auto;"><p align="right">
this bad
<br>boy is
<br>under
<br>constr-
<br>uction.
</p>
</div>

<div class="content" style="position: absolute; left:284px;  top:275px; width:208px; height:297px; overflow: auto;">

First off, I'm skinny, I know, I hear it enough you don't have to tell me again. I play guitar in <a href="suikodenrocks">Suikoden</a>. I've never seen the ocean. it's the first thing I'm doing when I graduate. I'm not your typical guy. neither are my friends. I like many different styles of music. as you can see on the left side of your screen. usually I'm pretty good at understanding problems, so if you need some help hollerrr. I'll see what I can do. I've been told I'm a good listener. BUT I am a blonde and you might have to run some things by me more than once. :]
<br><a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9NTg1ODI2NTAmYmxvZ0lEPTM1MTIwMzUwMg==">rewritten</a>

<br><br>
aim - toddkoden
<br>msn - brighten_@hotmail.com
<br>tmail - dancerobot@tmail.com
</div>

<div class="content" style="position: absolute; left:507px;  top:324px; width:186px; height:240px; overflow: auto;"><center>
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=58582650&albumId=0"><img src="http://img150.imageshack.us/img150/1723/myspaceimgrr3.jpg"></a>
<br>
<br>
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input name="friendID" value="58582650" type="hidden">
<textarea name="f_comments" class="area"></textarea><br />
<input type="submit"class="button" value="comment."></form>
</div>

again those top positions should be correct, I've tried making them smaller (even tried negatives) with no effect, everything just stays in the same position.

thanks in advance for the help

oh yeah - http://profile.myspace.com/index.cfm?fusea...iendid=58582650

[S-Majere]

This looks fine to me - the text is grey and everything appears to align correctly - in IE at least. I'll be testing this in Firefox as soon as I get my own PC back!

Edit: yep, tested in FF and IE - everything looks good.