OK. So I've spent the weekend tweaking the hell out of my myspace page. Few frames of custom divs, custom graphics, yadda yadda yadda. A friend of mine just introduced me to Microsoft Expression Web, which I've been using instead of notepad. Anyone who does any web design, I'd recommend you check it out.
on to my problem.
First I checked to see how it would display in Firefox.
as you can see, I'm having a small problem with my divs not completely covering up my default myspace page, but I'm more bothered by another problem...
As you can see, its not displaying AT ALL. No change in code between the time i took each screen shot. So ovbviously its SOMETHING I did while writing the divs out.
<html>
<head><title>
www.myspace.com/matthewchaos
<style type="text/css">
form>img#googleTLogo
{
background-image:url('http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/powered_by_google_white.png');
background-repeat: no-repeat;
}
#googleTLogo
{
vertical-align:bottom;
width:120px;
height:30px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://x.myspace.com/images/powered_by_google_white.png', sizingMethod='image');
}
</style>
<table bordercolor="ffcc99" cellspacing="0" cellpadding="0" width="435" bgcolor="ffcc99"
border="0">
<tr>
<td class="text" valign="center" align="left" width="300" bgcolor="ffcc99" height="17"
wrap="" style="word-wrap: break-word">
<span class="orangetext15">Matts's Blurbs</span></td>
</tr>
<tr>
<td>
<table bordercolor="000000" cellspacing="3" cellpadding="3" width="435" align="center"
bgcolor="ffffff" border="0">
<tr>
<td valign="top" align="left" width="435" bgcolor="ffffff" style="word-wrap: break-word">
<span class="orangetext15">
About me:</span><br>
<style type="text/css">
body div table td form {display:none;}
body div table tbody tr td table tbody tr td font a.navbar { font-size: 11px !important; }
body div table tbody tr td table tbody tr td font a.navbar:hover { color: 101010; }
html body table tbody tr td div font { visibility: hidden; }
html * {
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif !important;
font-weight: bold;
font-size: 10px;
color: e7e7e7;
-moz-outline-style: none;
}
body {
color: e7e7e7;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif;
font-size: 62.5%;
background-color: 101010;
}
table, td {
color: e7e7e7 !important;
border: 0px !important;
background-color: 101010 !important;
}
.main {
position:absolute;
left:50%;
top:125px;
width:800px !important;
z-index:1;
margin-left:-400px;
border: 0 !important;
background-color: 101010;
}
.main {
background-color: 101010;
}
img, img a:link { border: 0; padding: 0; margin: 0; }
td.overlayDivider {
border-style: none !important;
border-color: inherit !important;
border-width: 0 !important;
width: 800px;
height: 2000px;
font: 12px/17px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif;
color: e7e7e7;
overflow: auto;
background: url('http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/topphoto.jpg') no-repeat left top;
}
.me {
width: 319px; height: 328px;
display: block;
position: absolute;
top: 175px; left: 334px;
}
.me a { display: block; }
.me_image { width: 319px; height: 328px; display: block; }
.friendsPhoto {
width: 470px; height: 170px;
display: block;
position: absolute;
top: 530px; left: 18px;
}
.friendsPhoto a { display: block; }
.friendsPhoto_image { width: 470px; height: 170px; display: block; }
div.aboutMe p, div.commentRules p, div.otherContact p, div.blogArea p {
font: 12px/17px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif !important;
color: e7e7e7;
text-align: left;
padding: 0; border: 0;
font-weight: normal;
}
p a:link, p a:active,
td.stalkerishHead a:link, td.stalkerishHead a:active {
font-size: 12px;
text-decoration: underline;
color: abe301;
font-weight: normal;
}
p a:visited, td.stalkerishHead a:visited {
font-size: 12px;
text-decoration: none;
color: abe301;
font-weight: normal;
}
p a:hover, td.stalkerishHead a:hover {
font-size: 12px;
text-decoration: underline;
color: b51414;
font-weight: normal;
}
div.commentRules p { margin: 20px 0 0 0 !important; padding: 0; }
div.otherContact p { margin: -5px 0 0 0; }
div.blogArea p {
margin: 10px 0 0 0;
padding: 10px 0 0 0;
border-top-style: solid !important;
border-top-width: 1px;
border-top-color: 888888;
}
span.highlight { font-size: 12px; color: abe301; font-weight: bold; }
span.lowHighlight { font-size: 12px; color: abe301; font-weight: normal; }
div.contentWrap { margin: 0; padding: 0; overflow: auto; }
div.audioPlayer {
margin: 80px 0 0 20px;
width: 220px; height: 15px;
display: block;
}
div.aboutMe {
width: 280px; height: 150px;
display: block;
margin: 160px 0 0 20px;
}
div.socialButtons {
width: 150px; display: block;
margin: 140px 0 0 630px !important; padding: 10px 0 10px 0;
border-top-style: solid;
border-top-width: 3px !important;
border-top-color: b51414 !important;
border-bottom-style: solid;
border-bottom-width: 3px !important;
border-bottom-color: b51414 !important;
}
ul.socialSelector {
list-style-type: none;
list-style-position: inside;
padding: 0; margin: 0;
display: block;
}
ul.socialSelector li {
font: 12px/17px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif !important;
}
ul.socialSelector li a:link, ul.socialSelector li a:visited, ul.socialSelector li a:active {
font: 12px/17px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif;
color: abe301;
text-decoration: underline;
font-weight: bold;
}
ul.socialSelector li a:hover {
font: 12px/17px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif;
color: b51414;
text-decoration: underline;
font-weight: bold;
}
ul.socialSelector li.addFriend, ul.socialSelector li.addFavourite {
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: 888888;
}
ul.socialSelector li.addFriend {
padding-left: 26px;
padding-top: 0px !important; padding-bottom: 10px;
background: url('http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/icon_add.gif') no-repeat 0px 2px !important;
}
ul.socialSelector li.addFavourite {
padding-left: 26px;
padding-top: 10px; padding-bottom: 10px;
background: url('http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/icon_heart.gif') no-repeat 0px 13px !important;
}
ul.socialSelector li.sendMessage {
padding-left: 26px;
padding-bottom: 0px !important; padding-top: 10px;
margin-bottom: 0px;
background: url('http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/icon_message.gif') no-repeat 0px 12px !important;
}
div.lowerCopy { overflow: auto; margin: 20px 0 0 0; padding: 0; }
div.leftContent {
overflow: hidden;
margin: 70px 0 0 20px; padding: 0;
width: 520px; float: left;
}
div.rightContent {
overflow: hidden;
margin: 67px 0 0 0; padding: 0;
width: 240px; float: left;
}
div.commentArea {
display: block;
}
div.commentFormArea, div.commentRules { display: block; clear: both; }
div.commentRules { width: 280px; }
div.blogArea { margin: 50px 0 0 0; width: 480px; overflow: hidden; }
form.commentsForm { display: block; }
div.commentFauxTextArea {
width: 280px; height: 140px;
padding: 0; margin: 0;
border-style: solid;
border-width: 1px;
border-color: 888888;
display: block;
overflow: hidden;
float: left;
}
div.otherContact { width: 190px; margin: 0 0 0 10px; padding: 0; display: block; float: left; }
textarea.idCommentTextArea {
margin: 0; padding: 0; border: 0;
background-color: fcfcfc;
background-image: url(http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/fieldgrad.gif) top left repeat-x;
width: 280px; height: 120px;
display: block;
font: 11px/13px 'Andale Mono', 'Courier New', Courier, monospace !important;
color: 000000;
}
div.textAreaLowerBar {
height: 20px; width: 280px;
margin: 0; padding: 0;
display: block;
background-color: 4c4c4c;
background-image: url(http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/bargrad.gif) top left repeat-x;
overflow: hidden;
}
input.idSubmitButton { margin-left: 230px; }
div.stalkerishStats {
margin-top: 10px;
padding-top: 10px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: 888888;
}
div.stalkerishStats td.stalkerishHead {
padding-right: 10px !important;
}
td.stalkerishHead {
color: b51414 !important;
font: 12px/17px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif;
font-weight: bold;
vertical-align: top;
text-align: left;
}
td.stalkerishDetail_even {
color: e7e7e7 !important;
font: 12px/17px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif;
font-weight: normal;
vertical-align: top;
text-align: left;
}
td.stalkerishDetail_odd {
color: 888888 !important;
font: 12px/17px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif;
font-weight: normal;
vertical-align: top;
text-align: left;
}
h3.subhead_iam {
font: 20px Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: 888888;
display: block;
margin: 0 0 10px 0;
width: 280px; height: 20px;
background: url('http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/subhead_iam.gif') no-repeat left top;
text-indent: -5000px;
overflow: hidden;
}
h3.subhead_leaveacomment {
font: 20px Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: 888888;
display: block;
margin: 0 0 9px 0;
width: 280px; height: 23px;
background: url('http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/subhead_leaveacomment.gif') no-repeat left top;
text-indent: -5000px;
overflow: hidden;
}
h3.subhead_latestblogpost {
font: 20px Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: 888888;
display: block;
margin: 0 0 29px -3px;
width: 280px; height: 23px;
background: url('http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/subhead_latestblogpost.gif') no-repeat left top;
text-indent: -5000px;
overflow: hidden;
}
h3.subhead_stalkerishdetails {
font: 20px Helvetica, Arial, sans-serif;
text-transform: uppercase;
color: 888888;
display: block;
margin: 0 0 10px 0px;
width: 138px; height: 44px;
background: url('http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/subhead_stalkerishdetails.gif') no-repeat left top;
text-indent: -5000px;
overflow: hidden;
}
.leftPad {
margin-left: 20px !important;
}
* html div.leftContent { margin: 70px 0 0 10px; padding: 0; }
* html div.contentWrap { margin: 50px 0 0 0; }
* html body, * html .main { background: url('file:///C:/Users/mattchaos/Documents/My%20Web%20Sites/background_ie6.jpg') left top !important;
}
</style>
</style>
</td>
</tr>
<tr>
<td valign="top" align="left" width="435" bgcolor="ffffff" style="word-wrap: break-word">
<span class="orangetext15">
Who I'd like to meet:</span><br>
<div class="main">
<table style="width:800px; height:1200px; cellpadding: 0px; cellspacing: 0px; border:0px; margin:0px; background-color: 101010; ">
<tr><td valign="top" class="overlayDivider" style="margin:0; border: 0px;">
<div class="me"><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=13051562" title="Click for more photos"><img src="http://myspace.hyalineskies.com/blank.gif" class="me_image" /></a></div>
<div class="friendsPhoto">
<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=13051562">
<img src="http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/topfriendsfinal.jpg" class="friendsPhoto_image" style="width: 470px; height: 170px"></a></div>
<div class="contentWrap">
<div class="audioplayer">
<object type="application/x-shockwave-flash" data="http://myspace.hyalineskies.com/audioplayer.nopirate.swf?playlist_url=http://myspace.hyalineskies.com/playlist.xml&repeat_playlist=true" height="15" width="200">
<param name="movie" value="http://myspace.hyalineskies.com/audioplayer.nopirate.swf?playlist_url=http://myspace.hyalineskies.com/playlist.xml&repeat_playlist=true" />
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
</object>
</div>
<div class="aboutMe leftPad">
<h3 class="subhead_iam">I am…</h3>
<p>
A twenty-something extroverted creative fresh from Brevard. An uncompromising æsthete. A MySpace hacker,
interaction designer, creative writer and occasional electronic music producer. A fast driver. A fast talker. Either
110% passionate or entirely apathetic. A creator and product of the social media sphere.<br /><br />
<span class="lowHighlight">I am everything you've ever hoped for.</span>
</p>
</div>
<div class="socialButtons">
<ul class="socialSelector">
<li class="addFriend">
<a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=13051562" title="You know you want to.">Add to Friends</a></li>
<li class="addFavourite">
<a href="http://collect.myspace.com/index.cfm?fuseaction=user.addToFavorite&friendID=13051562&public=0" title="You haven't seen anything better.">Favourite Me</a></li>
<li class="sendMessage">
<a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=13051562" title="I promise I'll be nice.">Send Message</a></li>
</ul>
</div>
<div class="lowerCopy">
<div class="leftContent">
<div class="commentArea">
<h3 class="subhead_leaveacomment">Leave a Comment</h3>
<div class="commentFormArea">
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment" class="commentsForm">
<input type="hidden" name="friendID" value="13051562" />
<div class="commentFauxTextArea">
<textarea name="f_comments" rows="10" class="idCommentTextArea"></textarea>
<div class="textAreaLowerBar">
<input type="image" src="http://img.photobucket.com/albums/v406/wetryandtry/ELECTROPUNK/submitbutton.gif" class="idSubmitButton" alt="Submit" title="Just click this already." />
</div>
</div>
<div class="otherContact">
<p>
<span class="lowHighlight">Comments do not appear on this page.
(although I do read them)</span><br />
You may also want to try to contact me on AIM via <span class="lowHighlight">
whatsitthisweek</span>.
</p>
</div>
</div>
<div class="commentRules">
<p>
<br />
<span class="highlight">Read these before commenting</span><br />
1. I don’t friend bands that request friendships. I’ll find and friend you if I like your music.<br />
2. No chain letters. No, I don't care if you need to post it on 20
peoples' Myspaces, skip me. 3. I don't care who's
supposedly giving away iPods, computers, or game consoles.
Nobody I know has actually ever gotten one after doing all those
"offers".<br />
4. No, I’m not gay. Also, for everyone: no creepy sexual advances, thanks. You can make those after
we've talked for a while.<br />
<br />
</p>
</div>
</form>
</div>
<div class="blogArea">
<h3 class="subhead_latestblogpost">Latest Blog Post</h3>
<object type="application/x-shockwave-flash" data="http://myspace.hyalineskies.com/htmlviewer.swf?rssFeed=" height="150" width="480">
<param name="movie" value="http://myspace.hyalineskies.com/htmlviewer.swf?rssFeed=" />
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
</object>
<p><span class="lowHighlight">Pleases bear with me until I manage to
resume RSS feeds :P</span><br /><br />
Content Copyright © 2007 Matt Roberts. All Rights Reserved.</p>
</div>
</div>
<div class="rightContent">
<div class="stalkerishDetails">
<h3 class="subhead_stalkerishdetails">Stalkerish Details</h3>
<table class="stalkerishDetailsTable">
<tr>
<td class="stalkerishHead">General</td>
<td class="stalkerishDetail_odd">Aesthetics, Design, Technology, Silicon Valley,
Raving, Fashion, Web Development, Blogging, Poker,
Volkswagens, Cooking, Photography, European Girls, Travel</td>
</tr>
<tr>
<td class="stalkerishHead">Music<br />
<a href="http://www.last.fm/user/_onceagain/" title="View my last.fm profile">last.fm</a></td>
<td class="stalkerishDetail_even">Electro, Chiptunes, Electroclash, House, Psytrance, Indie Electronica, Breaks, Big Band / Jazz, Hip-Hop, Pop-Punk, Downtempo</td>
</tr>
<tr>
<td class="stalkerishHead">Movies</td>
<td class="stalkerishDetail_odd">Snatch, Lock Stock & 2
Smoking Barrels, Rounders, Fear & Loathing in Las Vegas,
Pulp Fiction, Zoolander, Donnie Darko</td>
</tr>
<tr>
<td class="stalkerishHead">Books</td>
<td class="stalkerishDetail_even">Cats Cradle, Tourist
Season, Just Play Dead, Assumed Identity, Patriot Games,
Sword Of Shannara</td>
</tr>
<tr>
<td class="stalkerishHead">Heros</td>
<td class="stalkerishDetail_odd">Hunter S. Thompson</td>
</tr>
<tr>
<td class="stalkerishHead">Job</td>
<td class="stalkerishDetail_even">Digital Design Guru<br />
M4ver1ck Designs Inc.</td>
</tr>
</table>
<div class="stalkerishStats">
<table class="stalkerishDetailsTable">
<tr>
<td class="stalkerishHead">Status</td>
<td class="stalkerishDetail_odd">Single, Straight</td>
</tr>
<tr>
<td class="stalkerishHead">Type</td>
<td class="stalkerishDetail_even">6' 5" / Thin</td>
</tr>
<tr>
<td class="stalkerishHead">Smoke?</td>
<td class="stalkerishDetail_odd">Breathes it</td>
</tr>
<tr>
<td class="stalkerishHead">Drink?</td>
<td class="stalkerishDetail_even">Socially</td>
</tr>
<tr>
<td class="stalkerishHead">Religion</td>
<td class="stalkerishDetail_odd">C/E - Christian</td>
</tr>
<tr>
<td class="stalkerishHead">Zodiac</td>
<td class="stalkerishDetail_even">Capricorn</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</td></tr></table></div></style>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
So if anyone has seen either of these issues before, I'd practically kill for a solution right about now. Thanks guys.
| 