How to widen the Friends Comments Header?? Options

[yoos]

Hi!! I'm trying to make it so the "xxxx Friends Comments" header expands with the comments when they grow from images and stuff that others post. I figured how to make it work in Firefox, but can't figure out how to get it fixed in IE. Any help would be GREATLY appreciated. I'll put pics of what I'm talking about below... You can see that the header cell is not the right width in IE.

Here's how I want it to look, this is Firefox:


Here's what it looks like in IE, I want it to look like Firefox but don't know how??:


Here's my site if you need to see the code or whatever:
http://www.myspace.com/yoyoos

Below is my code in the About Me section. The stuff in bold is what I changed (made it a larger number) for it to work in Firefox...

Hi, blah blah text describing me....

<div class="masthead"><span></span></div>

<style type="text/css">

NOTE {Reduce font metrics to tighten up top of screen... apply background color... apply IE-only background image if desired}

body {font-size: 1px; line-height: 1px;background-color:7E973B; font-family: Verdana, Arial, sans-serif; background-repeat: repeat-y; background-position: top center; background-image: url(http://i80.photobucket.com/albums/j192/yoospics/bg_myspace.jpg);}

NOTE {Apply better spacing to paragraphs}

p {margin: 0px 0px 1em 0px; font-family: Verdana, sans-serif !important}

NOTE {Set standard color and style for links}

a, a:link, a:visited {color:990000; text-decoration: none;}

a:hover {color:FFFFFF; text-decoration: none}

NOTE {Brought to you by the Images Without Borders coalition}

img {border: none}

NOTE {Set the BR height to create a vertical space between modules which is equal to the horizontal space between columns... gotta keep the grid tidy}

br {line-height: 20px;}

NOTE {Apply standard form-taming}

form {border-width:0px;background-color:none;}

input {background-color:transparent !important}

NOTE {Shifts banner ad over by a few pixels to re-center it}

body>div {margin-left: 10px;}

NOTE {Zeros out messed up colors and spacing that are inherent to most MySpace tables}

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

table table table td {background-color:transparent;margin:0px;padding: 0 26px 15px 26px}

NOTE {These are your standard content modules... apply desired background color}

table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}

table table table table td {padding:0px;margin:0px;}

table table table {margin:0px; background-color:94BD6B; width: 100% !important; border-width: 3px; border-style: double; border-color: 336600;}

NOTE {This is your custom masthead}

.masthead {width: 850px; height: 100px; position: absolute; margin-left: -425px; left: 50%; top: 162px; background-image: url(http://i80.photobucket.com/albums/j192/yoospics/header_myspaceblue.jpg);}

NOTE {Pushes your content down to make room for the masthead}

body table {margin-top:104px;}

body td table, body div table {margin-top: 0;}

NOTE {Sets default style for topnav/bottomnav text}

font {color:990033;font-size:10px}

a font:hover {color:FFFFFF}

a.navbar:link, a.navbar:visited {color:CC6666}

a.navbar:hover {color:FFFFFF}

table tr td table tr td font {display: inline;}

table tr td table a.navbar {font-size: 10px;}

NOTE {Sets default color for most text on the page}

.text {color:336600;font-size:11px}

a.text:link, a.text:visited {color:990033}

a.text:hover {color:FFFFFF}

NOTE {How your name will look... achieved with MIMSIR or Mike Industries My Space Image Replacement}

.nametext {background-image: url(http://i80.photobucket.com/albums/j192/yoospics/name_myspace.gif); background-position: bottom center; background-repeat: no-repeat; overflow: hidden; height: 40px; width: 270px; font-size: 1px; text-align: left; color: 94BE6B; padding: 0px 0px 3px 0px; display: block; margin: 14px 0px 8px 0px; border-width: 0px 0px 3px 0px; border-style: double; border-color: d7c59f;}

NOTE {Your "Contact Me" table... replace existing crap buttons with custom image}

.contactTable {width: 328px !important;}

.contactTable td {padding: 0px; margin: 0px; text-align: center;}

.contactTable span.whitetext12 {position: relative; left: 10px;}

.contactTable td table {background-color: transparent; background-image: url(http://i80.photobucket.com/albums/j192/yoospics/contacttable_myspace.gif); background-position: center; background-repeat: no-repeat;}

.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 30px; width: 136px; background-color: transparent;}

.contactTable a img, .contactTable img {border: 0px; display: none; visibility: hidden;}

NOTE {Stretches URL box out for IE}

table tr td table tr td table tr td div strong {display: block; width: 270px;}

NOTE {These are the headlines on the left side modules}

.whitetext12 {color:000000; font-size: 18px; margin: 0px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; display: block; font-family: Georgia, Helvetica, Arial, sans-serif; font-weight: normal; border-width: 0px 0px 3px 0px; border-style: double; border-color: 336600; width: 270px}

NOTE {This is the text in the "... is in your extended network" box}

.blacktext12 {color:000000;font-size:18px; font-family: Georgia, Helvetica, Arial, sans-serif; font-weight: normal; display: block; margin-top: 14px}

NOTE {Why not generate an exclamation phrase in the aforementioned box?... not viewable in IE}

.blacktext12:before {content: "OMFG! ";}

NOTE {"Latest Blog Entry" and "___ has this many friends" headlines}

.btext {color:000000; font-size: 18px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; display: block; font-family: Georgia, Helvetica, Arial, sans-serif; font-weight: normal; text-align: center; border-width: 0px 0px 3px 0px; border-style: double; border-color: 336600}

NOTE {All other headlines in right column modules}

.orangetext15 {color:336600; font-size: 18px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; display: block; font-family: Georgia, Helvetica, Arial, sans-serif; font-weight: normal; border-width: 0px 0px 3px 0px; border-style: double; border-color: 336600; width: 372px}

NOTE {Bold text on left side in "Interests" and "Details" modules}

.lightbluetext8 {color:336600}

NOTE {Span which contains your number of friends... we add "billion" to make you look cooler than you really are... not viewable in IE}

.redtext,.redbtext {color:336600; font-family: Georgia, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold}

.redbtext:after {content: " billion";}

NOTE {Text for "View All of ____'s Friends"}

a.redlink:link {color:336600; display: block; text-align: center; border-width: 3px 0px 0px 0px; border-style: double; border-color: d7c59f; padding-top: 3px;}

a.redlink:visited {color:990033}

a.redlink:hover {color:FFFFFF}

NOTE {Removes lame underlines on footer links}

u {text-decoration: none; font-size: 10px;}

</style>

<![if !IE]>
<style type="text/css">

NOTE {Here, we basically undo a bunch of crap we had to do to get IE to play nice}

.whitetext12{width: auto}

.contactTable {
width: auto !important;
}

.contactTable span.whitetext12 {
left: 0;
}

.orangetext15 {width: auto;}

table table table td{padding: 0;}

table table table {
padding: 0 14px 14px 14px;
border-color: d7c59f;
}

table table table {max-width: 800px;}

.nametext {
height: 35px;
width: auto;
}

table tr td table tr td table tr td div strong {
display: inline;
width: auto;
}


</style>
<![endif]>


<style type="text/css">
NOTE {Change online now pic}
table table table td.text div img {visibility:hidden;}
table table table td.text div {
background-image:url("http://i80.photobucket.com/albums/j192/yoospics/myspaceonline.gif");
background-repeat:no-repeat;}
table table table td.text table table div img
{visibility:hidden;}
table table table td.text table table div {
background-image:url("http://i80.photobucket.com/albums/j192/yoospics/myspaceonline.gif");
background-repeat:no-repeat;}
</style>
[/code]

Below is my code in the I'd Like To Meet section if it matters:

[code]</td></tr></table> </td></tr></table><br> <table bordercolor="000000" cellspacing="0" cellpadding="0" width="435" border="0"> <tr> <td class="text" align="left" width="435" bgcolor="9CBD6B" height="20"> <table height="20" cellspacing="0" cellpadding="0" width="435" bgcolor="ffcc99"> <tr> <td width="435" style="word-wrap:break-word">&nbsp;&nbsp;&nbsp;<span class="orangetext15">Leave Me a Comment:</span></td> </tr> </table> <table bordercolor="000000" cellspacing="3" cellpadding="3" width="435" align="center" bgcolor="9CBD6B" border="0"> <tr> <br><center><form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment" "return lengthCheck(this);"><input type="hidden" name="friendID" value="34214549"> <input type=hidden name=Mytoken value=20041116012729><textarea id="textarea" name="f_comments" cols="60" rows="5"></textarea><br><br><input id="buttons" type="submit" value="Submit"><input id="buttonr" type="reset" value="Reset"></form><form action="http://myspace.nuclearcentury.com" method="post"></form></center> </td> </tr><tr valign="center" align="right"> <td bgcolor="9CBD6B" colspan="4"><a href="http://www.myspace.com/index.cfm?fuseaction=user.viewComments&FriendID=34214549" class="redlink">View/Edit All All of My Comments</a><br> <center>(Note: You can scroll down to see comments too) <br></center> </td></tr>


<style type="text/css">
table table table td {vertical-align:top ! important;}
span.blacktext12 {
background-color:transparent;
background-image:url('http://i80.photobucket.com/albums/j192/yoospics/ExtendedNetworkBanner.gif');
background-position:center center;
font-size:0px; letter-spacing:-0.5px;
width:370px; height:68px; display:block; }
span.blacktext12 img {display:none;}
</style>


</table></tr></td>
<b style=position:absolute;left:0;top:0;>

[GREASEbaby]

Where you added the code to make it right in firefox, try adding !important. :]

[yoos]

Thanks for the quick response! I added !important as shown below, but that didn't fix it in IE...

CODE

table table table {max-width: 800px !important;}

[GREASEbaby]

Hmm, the best I can tell you right now is to move it with a div.

[yoos]

is just that header "cell"(?) it's own table that can be moved? I don't know anything about div's, but I'm willing to learn. I assume you mean I can "move" this header cell, like to the middle of the page? That would be cool if possible... If so, what is this table/cell? I mean, in the code I see the following:

table table table table XXXXXXXXXXXXX

or

table table table XXXXXXXXXX

or

table table table td XXXXXXXXXXXX

I'm assuming each one of these is like pinpointing a specific table or cell and the XXXXXXXX is where I'd put a div for the specific table/cell I specify. If I'm understanding it correctly, then what "code" specifies this header cell? I'm confused on how the table identifiers work. If anyone knows of any good resource that describes this I'd appreciate it too!