**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:
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.
Linear Mode
