Help!! move scrollable comments and friend section, I'm having trouble moving the scrollable freinds & comments se Options

[oblivionguitaris...]

I'm having trouble moving the scrollable top friends/comments section into a picture frame (it's a picture within a flash object background).

It's driving me crazy. Any help would be appreciated. (the picture frame that the scrollable comments/friends goes into is scrolled right & has instructions on it, in red and blue large text telling you where everything goes... you'll get it if you look at it)

Here's the link to the sight so you can see what it looks like as it is now: www.myspace.com/thuglifepb

and here's the coding I have so far..

In the about me section I have:

CODE

<div class="banner">
..</div>

<style type="text/css">
.banner {width: ##px; height:##px;position: absolute;margin-left: -405px;left: 50%;top: 0px;}
body {margin-top:670px;}
</style>

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="700" width="2700" data="http://static.wix.com/client/app.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://static.wix.com/client/app.swf" />
<param name="quality" value="high" />
<param name="flashvars" value="pageId=8KPaN3gkyHU-a&embedFormat=normal&embedID=Zyeyt_UTLMx4Drb4Xy0O1Qb4NaOCZiRs6sPkDA2B_kSa6zn_ItQTxH4LCjoHm_iUa&partner_id=WMGs4POB1ko-a" />
<param name="base" value="http://static.wix.com" />
<param name="wmode" value="transparent" />
<param name="scale" value="noscale" />
<param name="salign" value="tl" />
</object>




<style type="text/css">
body { position:relative; left:0px; top:0px; z-index:0; background-color:000000; } .bodyContent { background-color: 000000 }

a:link, a:visited, .redtext, .redbtext, a.redlink:link, a.redlink:hover { color:333333; }
a:link:hover, a:visited:hover { color:666666; }

.blacktext10, .orangetext15, .whitetext12, .nametext, .btext, table.friendsComments tr td { color:333333; }

object, embed { visibility:visible; position:absolute; top:1032px; left:50%; right:50%; margin-left:390px; z-index:9; }

.comments embed, .comments object { display:inline; visibility:visible; position:relative; top:0px; margin-left:0px; left:0px; right:0px; }

.navbar{visibility:visible;} .navigationBar font {visibility:hidden;} table,tr,td{background-color: transparent;border-style: none;} .navigationBar tr td { background-color:transparent; } .interestsAndDetails, .userProfileDetail, .userProfileURL, .contactTable, .profileInfo, .latestBlogEntry, .extendedNetwork, .orangetext15 { display:none; }

table.friendsComments img {max-width:300px; height:auto;} .friendsComments font {visibility:visible;} table tr tr td img { border-color:4e607b; }
table tr td div div a.text {visibility:hidden; border:0px!important; background-color:transparent;}

object, embed { visibility:visible; position:absolute; top:-35px; left:50%; right:50%; margin-left:-650px; z-index:1; }
</style>

and in the "I'd like to meet" section:

CODE

<div class="comments" style="overflow:auto; overflow-x:hidden; height:356px; width:500px; position: absolute; top:200px; left:50%; right:50%; margin-left:-300px; z-index:7; background-color:transparent;"><div style="margin-left:20px;"><div style="margin-top:-50px; margin-bottom:10px; margin-left:10px;"><a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTM2OTYzMjc1Mg=="><b>Add Comment</b></a></div><table><tr><td><table><tr><td>

<MOVE ALL HTML CODES (IMAGES/WIDGETS/SLIDESHOWS/VIDEOS) BELOW THIS CODE />

<div style="width:0px; margin-top:15px;"><img src="http://i200.photobucket.com/albums/aa62/lovemyflash/FlickrSpace-BETA/addcomment.gif" /><br/>
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment" style="margin-top:0px;">
<input type="hidden" name="friendID" value="369632752">
<textarea name="f_comments" rows="7" style="width:448px; color:191816;"></textarea><br />
<div style="text-align:right;">
<input name="submit" type="image" id="submit" src="http://i200.photobucket.com/albums/aa62/lovemyflash/FlickrSpace-BETA/sendcomment.gif" alt="Send Comment" align="top" /></div></form></div>

Reason for edit: [codebox]'s - Thomas

[fixtatik]

your coding is messy, so it's going to be difficult to actually know what you're seeing. you're using a body margin of 670px (why might i ask?), so in every browser except for internet explorer, there's a huge area above your layout.

in the ".comments" part of the style sheet, mess with the margins until you get it to be where you want it. margin:-198px 0 0 652px; is going to adjust the positioning in firefox, safari and opera. _margin:-865px 0 0 655px; will adjust the positioning in internet explorer. it works like this:

margin:TOP RIGHT BOTTOM LEFT;

if it's too far from the top, lower the top margin. if it's too far to the left, lower the left margin. if it doesn't work no matter what you change, then there's a poorly coded section you'll need to change or remove.