Div Layout Problems...., General problems with DIVS Options

[shaistensmami76]

I'm having a hard time with my DIV layout. The coding seems correct and everything is in working order...but after positioning my transparent DIV box on my background image, when switching to full screen the DIV box seems to move upwards. Someone help me pls!!!!!

Here's my page: http://profile.myspace.com/index.cfm?fusea...endid=137530151

Here's my coding:

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: 000000;
background-image: url("http://img144.imageshack.us/img144/8821/newdivlytworkingoncopypa5.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
scrollbar-arrow-color:000000;
scrollbar-track-color: 62fcae;
scrollbar-shadow-color: 62fcae;
scrollbar-face-color:62fcae;
scrollbar-highlight-color:ffffff;
scrollbar-darkshadow-color:000000;
scrollbar-3dlight-color:000000;}

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: transparent; background-color: transparent; }

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

{class for the basic font for the page}
.text {font:normal 10px century gothic; color:ffffff; font-weight:none; border:0px; text-transform: none; line-height:12px;}


{This is how all anchor points will be displayed; anchor points appear before all links.}
a{font-family:century gothic; font-size:10px; color:######; font-weight:none;border:0px; text-transform: uppercase; }
a:link{font-family:arial; font-size:9px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:century gothic; font-size:10px; color:000000; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:century gothic; font-size:10px; color:ffffff; 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:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:link{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:active{font-family:century gothic; font-size:10px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:visited{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}
a.navbar:hover{font-family:century gothic; font-size:10px; color:ffffff; font-weight:none;border:0px; text-transform: uppercase;}

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

{bolded words}
.standard b, p b, B, strong {
font-family:century gothic; font-size:12px; color:62fcae; font-weight:none;border:0px; text-transform: uppercase; }

</style>

<div class="content" style="position: absolute; left:255px; top:115px; width:489px; height:200px; overflow: auto;">
<center><img src="http://img521.imageshack.us/img521/1429/picture004sx4.jpg" alt="Image Hosted by ImageShack.us"/><br>
Who is this <b>mysterious</b> woman??? <u>Blessed</u> with them: My Big Daddy[[est. in 2005]] married 02.12.07]] and my litto boy Shaisten aka Beans[[03.10.06]]. Became a "military wife[[02.15.07]] && it feels like I'm <s>married to the mob</s>...Lol! My big 'ole teddy bear is currently in <s>Baghdad, Iraq</s> && Me n Beans is stuck in Louisiana[[surrounded by trees, trees and more tree..hehe.]]<br><br>
Wanna know more...hit up tha <b>inbox</b>...

<br>
♥Reeces Pieces♥</div>

[libertie]

Try changing your background code to this:

CODE

body {
background-color: 000000;
background-image: url("http://img144.imageshack.us/img144/8821/newdivlytworkingoncopypa5.jpg");
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
scrollbar-arrow-color:000000;
scrollbar-track-color: 62fcae;
scrollbar-shadow-color: 62fcae;
scrollbar-face-color:62fcae;
scrollbar-highlight-color:ffffff;
scrollbar-darkshadow-color:000000;
scrollbar-3dlight-color:000000;
}

I'm not exactly sure how far along you are on the layout, but at least this will make it align so that the top doesn't get cut off.

As far as the div box moving upward, when I change my window size it only shifts horizontally. I think maybe if you can be a bit more specific I can help out a little more (I don't think the background image was necessarily your problem).

edit; To get your div to stop shifting horizontally and stay centered, try this:

CODE

<div class="content" style="position: absolute; left:50%; margin-left: -285px; top:185px; width:495px; height:200px; overflow: auto;">