Is there a way to display top friends and comments, in a seperate that scrolls? Options

[worldradiostar]

I've got my friends and comments in seperate divs, but I'm having issues geting them to scroll. Am I doing something wrong, or is it not possible?

about me section:

CODE

<style>
body {
background-color: 000000;
background-image: url(http://i49.photobucket.com/albums/f254/worldradiostar/machines.jpg);
background-position: center center;
repeat: no-repeat;
overflow-x:hidden;}

.btext {
color: FFFFFF;
font-size: 8pt;
font-family: Verdana;
line-height: 10px;
letter-spacing: px;
font-weight: none;
text-decoration: none;
text-transform: none!important; }

a:link {
color: FFFFFF;
font-size: 8pt;
font-family: Verdana;
line-height: 10px;
letter-spacing: px;
font-weight: normal;
text-decoration: none;
text-transform: none!important; }

a:visited {
color: FFFFFF;
font-size: 8pt;
font-family: Verdana;
line-height: 10px;
letter-spacing: px;
font-weight: normal;
text-decoration: none;
text-transform: none!important;}

A:hover {
color: CCCCCC;
font-size: 8pt;
font-family: Verdana;
line-height: 10px;
letter-spacing: px;
font-weight: normal;
text-decoration: none;
text-transform: lowercase; }

a.navbar {
color: ffffff;
font-size: 8pt;
font-family: Verdana;
line-height: 10px;
letter-spacing:px
font-weight: normal!important;
text-decoration: none;
text-transform: none; }
a.navbar:link {color:"49BCD9";}
a.navbar:active {color:"49BCD9";}
a.navbar:visited {color:"49BCD9";}
a.navbar:hover {
color: FFFFFF;
font-size: 8pt;
font-family: Verdana;
line-height: 10px;
letter-spacing: px;
font-weight: normal!important;
text-decoration: none;
text-transform: none; }

a.redlink:link {color:"ffffff";}
a.redlink:active {color:"ffffff";}
a.redlink:visited {color:"ffffff";}
a.redlink:hover {color:"FFFFFF";
color: ffffff;
font-size: 8pt;
font-family: Verdana;
line-height: 10px;
letter-spacing:px
font-weight: none;
text-decoration: none;
text-transform: none;}

body, td, li, p, div, li, p, br {
color: FFFFFF;
font-size: 10pt;
font-family: Arial;
line-height: 12px;
letter-spacing: px;
font-weight: bold;
text-decoration: none;
text-transform: none!important;}

.latestblogentry {display:none;}
.extendednetwork {display:none;}
.userprofiledetail {display:none;}
.contacttable {display:none;}
.profileinfo {display:none;}
.userprofileurl {display:none;}
.blurbs {margin-left:800000px;}
.userprofileschool {display:none;}
table tr td {background-color:transparent;}
embed, object {width:0px; height:0px;} table table table embed, table table table object {width:320px; height:240px;}
</style>

<style>

orangetext15 {display:none}
</style>

<style>
.friendspace {
position: absolute;
align: center;
top: 1000px;
left: 180px;
width: 460px;
height: 400px;
background-color: transparent;
padding: 0px;
border: 0px;
z-index: 2;
overflow: auto;}

.main {
position: absolute;
overflow: auto;
left: 180px;
top: 160px;
width: 900px;
height: 1400px;
background-color: transparent;
z-index: 0; }

.friendscomments {
position: absolute;
overflow: auto;
left: 640px;
top: 1000px;
height: 400px;
width: 440px;
background-color: transparent;
padding: 0px;
border: 0px;
z-index: 2;
}

</style>
<style>
.friendSpace td a img {border:0px;}
</style>

<style>
.Hide Orange Bars and Text{rr}
td.text table {width:100%;}
.friendsComments td table, .friendsComments td.text table, .friendSpace table, .blurbs, .blurbs td.text {background-color:transparent; border:0px;}
.orangetext15{display:none;visibility:hidden;}
</style>

I'd like to meet section:

CODE

<div class="main"><img src="http://i49.photobucket.com/albums/f254/worldradiostar/overlaycopy-2.jpg" border="none" /></div>

<div class="friendspace"></div>
<div class="friendscomments"></div>

[fixtatik]

it's possible, but only in firefox (and maybe flock, too, i'm not sure). to do it, you need to set your friends and comments to block display:

CODE

.friendSpace, .friendsComments { display:block; }

tables (which your friends and comments are displayed in), can't be scrolled. setting them to block display turns them into a faux div, but only firefox will recognize it. any other browser will still treat them as normal tables.

[Mikeplyts]

You could probally just hide your friends and comments and make custom sections by yourself. I would probally hide both then copy the friends space and the comments. But I never really tried it.
Or you can just make to links for your friend space and your comments.
just look how I have my myspace.

[worldradiostar]

I'm trying to get my friendspace and friendscomments to display in separte scrolling divs, to clarify. I'd like to get both tables in seperate divs, to scroll through them. I've seen this done before, though I don't know where. Check out www.myspace.com/attackprofiletest to see what I'm going for. It'd be swell if I could figure the darn thing out. I'm re-designing my buddies tat shop's page, and would like to get it live soon.

[aQuafly]

you should use this code

insert at the end of your who I'd like to meet:

CODE

<div style="width:XXpx;
height:XXpx; overflow:auto; position:absolute;
top:XXpx; left:50%; margin-left:-XXpx; ">
</table></tr></td><table><tr><td>

then just fix the XX's to position the tables where you'd like, as well as the height and width to get the size that you'd like.

I'm not 100% on this, but I'm pretty sure.

[worldradiostar]

hmmm, not really doin the trick. just centered everything. tweaked it a bit, but to no avail. Thanks. I'm more just curious if what I want to do is possible.

[aQuafly]

my mistake, it's this

CODE

<div class="comments"><table><tr><td><table><tr><td>

paste that at the end of your who I'd like to meet.

Then paste this inside your coding

CODE

.comments
{position:absolute;
top:XXpx;
left:50%;
margin-left:-XXpx;
width:XXpx;
height:XXpx;
overflow:auto;}

adjust the XX's to fit your layout

Sorry, I was thinking of something else before.

[worldradiostar]

cool cool. thanks guys

[Mickey]

Alright, topic closed & moved.