Final phase of tweaking on Myspace profile

[ravager]

http://myspace.com/joeystestingpage

**New: I've got the layout how I want it to look in FF, so please use that as a reference when providing tips to make it look the same in IE.

1. In IE the "aboutmevN" image is partially hidden. I would like to make this image fully visible and hide the text "Trey's Blurbs." If you highlight Trey's Blurbs and move the cursor downwards, you will see there is some lines of code that I have no idea about. I couldn't find these lines of code in my original code so it must be something done by myspace. Anyways, I would like to hide this and make the "aboutmevN" image fully visible, just as it is in FF.

2. It would be nice to do away with the horizontal scrollbar in FF. There is no horizontal scrollbar in IE, but in FF, for some odd reason, there is a horizontal scroll bar which allows you to scroll the page horizontally for no point, because it's designed to fit perfectly on 1024x780 resolution.

**I have gotten comments that the page takes a long amount of time to load due to all of the pictures. If it takes you an unusual amount of time to load the page, please comment here. I'm working on decreasing the file sizes of the pictures, although that will mean a loss in quality. If you have any other recommendations or alternative solutions to fix this particular issue, please feel free to suggest.

I'm relying on you guys and the expertise that you possess to perfect this layout. After this final phase of tweaking, this baby should be ready to go into action!

My current code:

<br><br><br><br><br><img src="http://i24.photobucket.com/albums/c47/ravager88/aboutmevN.gif" border="0">




<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450px;"><embed style="width:435px; visibility:visible; height:270px;" allowScriptAccess="never" src="http://www.profileplaylist.net/mc/mp3player.swf?tomy=http://www.profileplaylist.net/mc/config/skins/config_white_noautostart_shuffle.xml&mywidth=435&myheight=270&skinurl=http://i24.photobucket.com/albums/c47/ravager88/playlistbg.jpg&file=http://www.profileplaylist.net/loadplaylist.php?playlist=39128589" menu="false" quality="high" width="435" height="270" name="mp3player" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0"/></div>


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

<div style="clear:both;"></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 {color:white; font-size: 1px; line-height: auto;background-color:000000; font-family: Verdana, Arial, sans-serif; background-repeat: repeat-y; background-position: top center; background-image: url(http://i24.photobucket.com/albums/c47/ravager88/BGv2-1.gif);}

NOTE {Apply better spacing to paragraphs}

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

NOTE {Set standard color and style for links}

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

a:hover {color:ed1850; 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: -100px;}

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}

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:transparent; width: 100% !important;}

NOTE {This is your custom masthead}

.masthead {width: 910px; height: 418px; position: absolute; margin-left: -458px; left: 50%; top: 162px; background-image: url(http://i24.photobucket.com/albums/c47/ravager88/Headerv32.gif);}

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

body table {
border-collapse:collapse;
max-width:910px;
width:910px;
margin:420px auto 0;
}

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

NOTE {Sets default style for topnav/bottomnav text}

a {color:ffffff;}

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

a font:hover {color:faab1b}

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

a.navbar:hover {color:faab1b}

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:fdb813; font-size:10px; text-align:center; margin:0;}

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

a.text:hover {color:fdb813}

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

.nametext {display:none;}

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

.contactTable {width: 437px; height:125px; !important;}

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

.contactTable td td {width:219px; margin:0; padding:0;}

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

.contactTable td table {width:437px; height:125px; background-color: transparent; background-image: url(http://images.redbullftp.com/walshy/contactTable.gif); background-position: center; background-repeat: no-repeat;}

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

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

.contactTable .whitetext12 {
display:none;
}

.contactTable .tdborder {
height:auto;
}

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:fdb813; font-size: 12px; font-weight:bold; margin: 0px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: left; display: block; border:none; width: 270px}

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

.extendedNetwork {background:000000 url(http://images.redbullftp.com/walshy/extendedNetwork_bg.gif) no-repeat; height:52px; padding:0; margin-top:0;}

.extendedNetwork tbody tr, .extendedNetwork tbody tr td {margin:0;padding:0;}

.blacktext12 {text-transform:uppercase; color:ffffff; font-size:12px; font-weight: normal; display: block; margin-top: 0px;}

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

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

.btext {color:333333; font-size: 18px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; display: block; font-weight: normal; text-align: center; border:none;}

NOTE {All other headlines in right column modules}

.orangetext15 {color:818181; font-size: 18px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; display: block;font-weight: normal; border:none; width: 372px}

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

.lightbluetext8 {
color:818181;
margin-bottom:30px;
}

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:818181; font-size: 18px; font-weight: bold}

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

a.redlink:link {color:818181; display: block; text-align: center; border:none; padding-top: 3px;}

a.redlink:visited {color:818181}

a.redlink:hover {color:818181}

NOTE {Removes lame underlines on footer links}

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

.profileInfo table {
margin: -25px 0 0 0;
}

.profileInfo {
border-collapse:collapse;
background:000000 url(http://i24.photobucket.com/albums/c47/ravager88/BasicInfoBGcopy-2.gif) no-repeat;
width:437px !important;
height:340px;
color:fdb813;
font-size:.9em;
margin-top:20px;
}
.profileInfo td {
vertical-align:top;
}
.profileInfo tbody tr td {
margin:0;
}
table.profileInfo tbody tr td table tbody tr td {
text-align:center;
_padding-top:25px;
width:200px;
}
table.profileInfo tbody tr td table tbody tr td br {
line-height:5px;
}
.profileInfo img {
display:none;
}
.profileInfo img.ImgOnlineNow {
display:inline;
}
.profileInfo a img {
display:inline;
margin-top:60px !important;
_margin-top:35px;
margin-right:18px !important;
margin-left:40px !important;
}
.latestBlogEntry {
width:437px;
height:auto !important;
background-color:fdb813;
background-image:url(http://images.redbullftp.com/walshy/blog_bg.gif);
background-repeat:no-repeat;
background-position:bottom left;
padding:10px !important;
padding-bottom:30px !important;
border-collapse:separate !important;
_padding-bottom:50px !important;
}
.latestBlogEntry tbody tr td {
height:40px !important;
}
.latestBlogEntry .btext {
display:inline;
font-size:1.2em;
font-weight:bold;
}
.latestBlogEntry .text {
font-size:1.2em;
color:black;
}
.latestBlogEntry a {
font-size:1.2em;
color:ed164f;
}
.userProfileURL {
width:437px !important;
height:61px;
margin:0;
padding:0;
background-image:url(http://images.redbullftp.com/walshy/url_bg.gif);
background-repeat:no-repeat;
}
.userProfileURL div {
color:989898;
padding-top:5px;
padding-left:10px;
}
.userProfileURL .userProfileURL {
width:auto;
height:auto;
background-image:none;
background-color:transparent;
}
.blurbs, .blurbs div {
color:ffffff !important;
}

.blurbs .text .orangetext15 {
width:100%;
display:block;
text-align:left;
color:fcb913;
}
.blurbs span.text {
margin-top:-300 !important;
width:100%;
display:block;
font-size:10px;
color:818181;
text-align:left;
}
.lightbluetext8 {
font-weight:bold;
color:ffffff;
font-size:10px;
text-align:right;
}
.searchlinksmall, .interestsAndDetails tbody tr td table tbody tr td a, .interestsAndDetails tbody tr td a, .userProfileDetail tbody tr td table tbody tr td, .userProfileDetail tbody tr td table tbody tr td a {
color:818181 !important;
font-weight:normal;
text-decoration:none;
font-size:9px;
}
.userProfileSchool tbody tr td table tbody tr td {
color:818181 !important;
}
.userProfileCompany tbody tr td table tbody tr td .text {
color:white !important;
margin-bottom:5px !important;
display:block !important;
text-align:left;
}
.friendSpace .orangetext15 {
text-indent:-30000em;
display:block;
width:437px;
height:46px;
margin:0;
padding:0;
background-image:url(http://i24.photobucket.com/albums/c47/ravager88/friendsheader.gif);
background-repeat:no-repeat;
}
.friendSpace .btext {
font-weight:bold;
color:white;
font-size:10px;
text-align:left;
margin-bottom:10px;
}
.friendSpace .btext .redbtext {
font-weight:normal;
color:fbb811;
font-size:10px;
}
.friendSpace a {
display:inline !important;
}
.friendSpace tbody tr td table tbody tr td table tbody tr td table tbody tr td a img {
border-width:2px !important;
border-color:fbb811 !important;
}
.friendsComments {
width:437px !important;
overflow:hidden !important;
}
.friendsComments, .friendsComments b, .friendsComments .columnsWidening, .friendsComments .columnsWidening .blacktext10 {
font-size:10 !important;
font-weight:normal !important;
color:818181 !important;
}
.friendsComments .columnsWidening {
overflow:hidden;
}
.friendsComments tbody tr td table tbody tr td table tbody tr td {
max-width:210px;
overflow:hidden !important;
}
.friendsComments tbody tr td table tbody tr td table tbody tr td a {
display:block;
width:150px;
overflow:hidden;
color:black;
font-size:.1em;
}
.friendsComments .columnsWidening a {
display:inline;
color:fbb811;
font-size:1em;
}
.friendsComments b {
margin-bottom:10px;
}
.friendsComments td {
white-space:normal !important;
overflow:hidden !important;
}
.friendsComments a, .friendsComments .redtext {
font-size:10 !important;
font-weight:normal !important;
color:fbb811 !important;
}
.friendsComments .orangetext15 {
color:fdb813;
font-size: 12px;
font-weight:bold;
text-align: left;
border:none;
}

.kiaenetoClothing {
margin:10px 0;
}

font {
margin:0 5px 5px 5px;
}
</style>

<comment>
<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 span.whitetext12 {
left: 0;
}

.orangetext15 {width: auto;}

table table table td{padding: 0;}

table table table {
padding: 0;
border:none;
}

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

.nametext {
display:none;
}

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

</style>
</comment>

<style type="text/css">
.interestsAndDetails, .userProfileSchool, .userProfileCompany, .friendSpace {
display:block !important;
clear:both;
width:437px !important;
padding-top:0;
padding-bottom:30px;
background-color:black;
background-image:url(http://images.redbullftp.com/walshy/divider.gif);
background-repeat:no-repeat;
background-position:bottom left;
overflow:visible;
height:auto;
}
</style></style></span>
</td>
</tr>

div#logo {
margin-top: 0;
padding: 9px 0 0;
}

div#shortcuts {
width: 155px;
height: 30px;
margin-top: 11px;
margin-left: 7px;
padding-left: 7px;
margin-bottom: 0;
}

div#searchheader {
margin-top: 5px;
width: 465px;
}

div#shortcuts select {
width: 133px;
}

div#shortcuts div {
text-align: left;
}
#header *{visibility:visible !important;}
#header input{display:inline !important;}

</style>






<STYLE type=text/css>
#tkn_leaderboard{visibility:visible !important; display:inline !important;}
body TABLE TD DIV#header_gae { VISIBILITY: visible !important;}

body DIV DIV select#profileaction{VISIBILITY: visible !important; display:inline !important; position:static; WIDTH: 125px !important;}
body DIV DIV DIV#profilelinks{ VISIBILITY: visible !important; display:inline !important; position:static; padding-right:15px; }

body DIV TABLE TD DIV#googlebar
{
VISIBILITY: visible !important;
display:block !important;
position:relative;
..;
}

body DIV DIV form #q,
body DIV DIV form #t,
body DIV DIV form #submitBtn,
body DIV DIV form #imgGoogle
{
VISIBILITY: visible !important;
display:inline !important;
position:static;
}

select {position:static !important; top:inherit !important;}

.photoDisplaySmall
{
width:56px;
}
div.photoThumbnail div.thumb
{
padding:0px !important;
border: solid 0px black !important;
float: left !important;
}


</STYLE>














</body>
</html>


</td></tr></table><table style="display:none"><tr><td>




~Rav.

[mjlorbet]

should post your actual factual code... link to your site is a decent out, however, it does take 20 seconds to load on my dedicated T1.... think you may want to rethink the amount of content you're loading all at once, dialup users will, (insert something here to give a humourous demonstration of a thing that takes a long time that could happen to a person) before your page loads

[ravager]

Wow 20 seconds! I'll have to get that down huh?

[mjlorbet]

<style type="text/css">.blacktext12 span {display:none;</style><b style=position:absolute;left:0;top:0;z-index:9;>

probably should read

<style type="text/css">
.blacktext12 span {
display:none;
position:absolute;
left:0px;
top:0px;
z-index:9;
}
</style>



positioning issues can be caused by broken css like that, also, make certain that all your css is within the <head> tags, not the <body> tags

[_Aerospace_Eng_]

also, make certain that all your css is within the <head> tags, not the <body> tags
Guess you don't understand how myspace works. Its okay many of us prefer not to. It only allows you to enter CSS and html into little boxes. The boxes will appear in the body of the page. You have no choice. You can use IDs, you can use the # sign. You can only use classes. You can't use the # sign on hex values either.

[mjlorbet]

nope, no idea how myspace works, i do not condone social networking, in any of its static electronic forms. communication at its best is done either face to face or over a phone (i'll even permit instant messaging), not via a collection of text and pictures on some site off in cyberspace. thanks for the pointer though, i'll be sure to remember it in the future. out of curiosity, then, is it more appropriate to use inline styles instead of style blocks for myspace, and other social networking content that do not allow access to the head closure? i only bring this up, as having the style tag within the body closure causes the markup not to validate.

[_Aerospace_Eng_]

Yeah well the markup on myspace already doesn't validate even with the default layout that a user is given. I think not sure but myspace also strips out style attributes. Could be mistaken though.

[ravager]

Heh yeah, MySpace is really weird so you have to make adjustments. I've solved some of the previous issues I posted and I've got the layout exactly how I want it to look in FF. However, IE likes to screw me over, ha. I updated the first post with new information. Not too far from being finalized!

[mightypants]

link to your site is a decent out, however, it does take 20 seconds to load on my dedicated T1.... think you may want to rethink the amount of content you're loading all at once, dialup users will, (insert something here to give a humourous demonstration of a thing that takes a long time that could happen to a person) before your page loads


Is there a reason you have all those pics in the interest section, rather than in the dedicated pics page. Moving those would drastically reduce load times, not to mention that having that many pics in a vertical line looks awkward (in my opinion).

[ravager]

Yeah, there is a reason, but I'm not going to disclose it at this time. As for the awkwardness you speak of, on my real MySpace page there will be comments parallel from the pictures so it will even it out.

How long did it take you to load the page?