Friends table cell width Options

[fixtatik]

so i've been working diligently on a myspace div layout for a few hours. i always test my layouts in safari, IE, firefox & opera so they'll look good to everyone. just now i stumbled into a problem i can't seem to fix.

my myspace testing profile has one friend (tom). CB's previewer, and most other myspace profiles have many more than one friend. i was making a div layout (very thin) that shows friends and comments in a column next to an "about me" section. my problem is that the layout looked wonderful with one friend (see screen shot below), but anything more than that and every blew up. the friends table went screwy and shot across the screen.

click to enlarge

here's the code i'm using:

CODE

<style type="text/css">
.navigationBar, .profileInfo, .userProfileURL, .contactTable, .interestsAndDetails, .userProfileDetail, .userProfileSchool, .userProfileNetworking, .userProfileCompany, .extendedNetwork, .latestBlogEntry, .blurbs td.text, .orangetext15, .btext, .redbtext, .redtext, .friendtext, .blacktext10 { display:none; }

body { background:url(http://i32.tinypic.com/302ubs1.png); }

table div { display:none; }
div table div, table table div { display:block; }
table, tr, td { background:none; border:0; }
table { border-collapse:collapse; border-spacing:0; }
td { padding:0; }

a img { background-color:000000; border-color:ffcc00; border-style:solid; border-width:1px; padding:2px; }

.friendSpace { position:relative; margin:-36px 86px 0 0; _margin:-47px 84px 0 0; }
.friendSpace, .friendSpace td.text, .friendSpace td.text table { width:210px; }
.friendSpace td.text table td span.orangetext15 { background:url(http://i26.tinypic.com/wvebn7.png) no-repeat; width:210px; height:20px; display:block; }
.friendSpace td.text table td table { background:url(http://i27.tinypic.com/jubpkk.png) repeat-y; _position:relative; _margin-top:-1px; }
.friendSpace td.text table td table table { background:none; }
.friendSpace td { width:40px!important; }
.friendSpace div { background:url(http://i30.tinypic.com/n6xqpv.png) no-repeat; width:210px; height:30px; display:block; text-align:center; }
.friendSpace div a { padding:0 5px; }
.friendSpace img { width:40px; }

.friendsComments { position:relative; margin:-30px 86px 0 0; _margin:-30px 84px 0 0; }
.friendsComments, .friendsComments td.text, .friendsComments td.text table, .friendsComments td.text table td { width:210px; }
.friendsComments td.text table td a { background:url(http://i30.tinypic.com/n6xqpv.png) bottom no-repeat; width:210px; height:20px; display:block; text-align:center; padding:0 0 10px 0; _position:relative; _margin:-3px 0 0 -3px; }
.friendsComments td.text table td td { width:90px; }
.friendsComments td.text table td td a { background:none; width:auto; display:inline-block; width:auto; height:auto; padding:0; }
.friendsComments td.text table td table table { background:none; }
.friendsComments td.text table td span.orangetext15 { background:url(http://i26.tinypic.com/wvebn7.png) no-repeat; width:210px; height:20px; display:block; }
.friendsComments td.text table td table { background:url(http://i27.tinypic.com/jubpkk.png) repeat-y; _position:relative; _margin:-7px 0 0 -3px; }
.friendsComments td.text table td b { display:none; }
.friendsComments .columnsWidening { padding:0 0 10px 0; overflow-x:hidden; }
.friendsComments td.text table td td b { display:inline-block; }
.friendsComments { margin-bottom:30px; }
.friendsComments .columnsWidening img, .friendsComments .columnsWidening object, .friendsComments .columnsWidening embed { max-width:90px; _width:90px; }

.friendSpace td.text table td span.orangetext15, .friendsComments td.text table td span.orangetext15, h1, h2, h3, h4, h5, h6 { font:12px Georgia, "Times New Roman", Times, serif!important; color:ffcc00; text-align:center; text-transform:lowercase; padding:10px 0 0 0; }

.contactlinks { position:absolute; left:50%; margin:-21px 0 0 -190px; _margin:-26px 0 0 -190px; width:210px; }
.contactlinks a { display:inline-block; padding:3px 3px 5px 3px; background-color:1a1a1a; border-color:ffcc00; border-style:solid; border-width:1px; border-bottom:0; font:10px "Courier New", Courier, monospace; }
.contactlinks a:hover { padding-bottom:10px; position:relative; top:-5px; _top:0; _margin-top:-5px; }
.main { position:absolute!important; left:50%; margin:-6px 0 0 -200px; _margin:-11px 0 0 -200px; width:210px; }
.contenttop { display:block; width:210px; height:30px; background:url(http://i26.tinypic.com/wvebn7.png); }
.contentmid { display:table; width:210px; background:url(http://i27.tinypic.com/jubpkk.png) repeat-y; }
.contentbot { display:block; width:210px; height:30px; background:url(http://i30.tinypic.com/n6xqpv.png); }
.footer { margin-bottom:30px; }

div, p, td, span { font:10px Arial, Helvetica, sans-serif!important; color:ffcc00!important; line-height:10px!important; }
p { text-align:justify; padding:0 10px; }
a, a.redlink { color:e400ff!important; font:normal 10px Arial, Helvetica, sans-serif; }
a:hover, a.redlink:hover { color:9704a8!important; text-decoration:none!important; }
sup, sub { line-height:0; font-size:8px; }
u { border-bottom-color:e400ff; border-bottom-style:dotted; border-bottom-width:1px; }
img.default { margin:0 3px 3px 0; }
</style>

<div class="contactlinks">
<a href="http://home.myspace.com/index.cfm?fuseaction=user">home</a>
<a href="http://messaging.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXX">add</a>
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXX">msg</a>
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXX">pic</a>
<a href="http://friends.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXX">blk</a>
</div>
<div class="main">
<div class="contenttop"></div>
<div class="contentmid">
<p><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXX"><img class="default" src="http://a187.ac-images.myspacecdn.com/images01/28/s_b21818fb15bd982bca4b3817c146e83a.gif" align="left"></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sodales velit quis risus. Donec odio turpis, ullamcorper eu, semper eget, volutpat placerat, ligula. Maecenas nec arcu vel ipsum vulputate cursus. Mauris eget purus ut sem dapibus malesuada. Morbi a lacus ac leo commodo ultricies? Vivamus hendrerit. Pellentesque massa justo, pulvinar et, malesuada in, adipiscing ut, mi! Ut at justo sed lectus laoreet auctor. Morbi rutrum luctus felis. Nulla eget purus? Nulla vel purus. Nulla luctus varius felis. Phasellus et elit dapibus nibh cursus pharetra. Morbi gravida, libero eu vestibulum tincidunt; est urna eleifend velit, ac varius arcu pede at massa!</p>

<p>Quisque ut nisl. Aenean aliquet accumsan quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc lobortis tortor sit amet pede. Cras dignissim. Duis a elit. Nullam euismod lectus ut ligula? Ut ipsum. Vestibulum malesuada rhoncus dolor. Vivamus facilisis. Nulla ac sem. Quisque molestie lorem vel tortor. Etiam eleifend lorem vitae erat. Pellentesque et libero? Nam eget purus eu odio eleifend feugiat! Duis mattis scelerisque diam.</p>

<p>In sit amet purus. Etiam iaculis. Nunc sed ipsum et quam sollicitudin gravida. Nullam pulvinar, odio eget tincidunt consectetuer, lorem nunc mollis felis, sit amet commodo leo ipsum sed massa. In hac habitasse platea dictumst. Nam sed mauris. Duis vitae nisl eget ligula varius venenatis. Cras elit orci, imperdiet nec, lobortis et, iaculis tempus, leo! Phasellus convallis, sem sit amet mattis gravida, odio dui gravida nisi, vitae molestie est tellus quis libero. Fusce tempus, velit a faucibus ornare, lorem quam scelerisque sapien, eget adipiscing ipsum dui eu velit. Cras metus mauris, vehicula eget, malesuada ut; consectetuer in, massa? Donec urna nisi, dignissim eu, pellentesque ac, posuere tincidunt, turpis. Ut convallis faucibus enim? Donec suscipit. Aenean id nisl a felis volutpat lacinia. Quisque dolor diam, eleifend id; euismod vitae, suscipit id, purus. Phasellus vulputate. Pellentesque eros nisi, facilisis vel; adipiscing id, dictum id, dolor.</p>
</div>
<div class="contentbot"></div>
<div class="contenttop"></div>
<div class="contentmid">
<p class="footertext">© 2008 grrÐesign.<br />
© 2003-2008 myspace.com.<br />
<a href="http://www.myspace.com/index.cfm?fuseaction=misc.terms">terms</a> -
<a href="http://www.myspace.com/index.cfm?fuseaction=misc.privacy">privacy</a> -
<a href="http://www.myspace.com/index.cfm?fuseaction=cms.viewpage&placement=safetysite">safety</a> -
<a href="http://collect.myspace.com/index.cfm?fuseaction=misc.contactInput&ProfileContentID=XXXXXX">report abuse</a></p>
</div>
<div class="contentbot footer"></div>
</div>

the only spot i need to focus on is the area dealing with ".friendSpace { }." everything else was coming out wonderfully. i'm assuming the problem has something to do with table cells deep within the friendSpace table itself, but i can't seem to work it out. at first i thought it was because CB's previewer is pretty lousy and outdated, but i tried it on my own profile and it had the same problem.

i've tried doing something like this:

CODE

.friendSpace td.text table td table td table td { width:40px; }

unfortunately, it doesn't make a difference. i'm sure i could figure it out if i wracked my head to the core, but i'm just looking for some feedback on it. any insight on some kind of a solution would be awesome.

[fixtatik]

it worked! you kinda rule :D
it did mess with the alignment a little bit, but i fixed that.

my only other problem is that in firefox, the table borders of the comment section shows up no matter what i do. i did a temporary fix of changing the color to that of the background, but if you look closely you can see where the borders are overlapping the background border.

i think i'll try to fix that in the future. right now i need to get back on track of my one layout a day.

[fixtatik]

that's already in the style sheet. myspace filters out # signs anyway, right?

[fixtatik]

i think i'll live with how it is. people are complaining about the preview and stretchy comments anyway (doesn't anyone read notes anymore?).

you guys can close this.