Help - Search - Members - Calendar
Full Version: Myspace Music Player Alignment
Forums > Resource Center > Support Center > MySpace Support > Myspace Resolved Topics
timebomb606
Nov 13 2008, 02:13 PM
Does anyone on here know why this would happen on two different sized monitors? Both are using Firefox 3.0.....

this is how it looks on a flatscreen 19 inch monitor

click to enlarge


and this is how it looks on my 17 inch CRT monitor....

click to enlarge
manny-the-dino
Nov 13 2008, 02:19 PM
Moved to Myspace Support
Mickey
Nov 13 2008, 02:35 PM
Please post the codes you're using.
timebomb606
Nov 13 2008, 02:38 PM
CODE
<style>
table table td.text object {position:absolute; top:750px; left:450px;}
</style>

<style type="text/css">
.masthead {position:absolute; margin-top:-1227px; margin-left:-400px; left:50%; width:800px; height:700px; z-index:2;}
</style>



<style type="text/css">body table{ margin-top: 500px;_margin-top: 500px; color: 000000; }
body td table, body div table { margin-top: 0; _margin-top:0; color: 000000; z-index:9;}</style>

<style type="text/css">
.tg_left {position:absolute; margin-top:-690px; margin-left:-398px; left:50%; width:330px; height:1000px; background-color:000000; z-index:2;}
</style>

<div class="tg_left">
<img src="http://www.captive-clothing.com/tde/images/left_01.gif">
<br>
<img src="http://www.captive-clothing.com/tde/images/left_02.gif">
<br>
<img src="http://www.captive-clothing.com/tde/images/left_03.gif">
<br>
<br>
<img src="http://www.captive-clothing.com/tde/images/left_talk.gif">
<br>
<br>
<table width="300" border="0">
<tr>
<td><div align="center" class="style5">Hussain</div></td>
<td><div align="center" class="style5">I Am 80s Metal </div></td>
</tr>
<tr>
<td><div align="center" class="style5">Tom</div></td>
<td><div align="center" class="style5">HangingHeart45 </div></td>
</tr>
<tr>
<td><div align="center" class="style5">Mike</div></td>
<td><div align="center" class="style5">Livethedreamxxx </div></td>
</tr>
<tr>
<td><div align="center" class="style5">Rick</div></td>
<td><div align="center" class="style5">RickyOhTDE</div></td>
</tr>
</table>
<br>
<br>
<img src="http://www.captive-clothing.com/tde/images/left_media.gif">
<br>
<br>
<img src="http://www.captive-clothing.com/tde/images/left_merch.gif">
<br>
<br>
<img src="http://www.captive-clothing.com/tde/images/left_info.gif">
<br>
<br>
<table width="300" border="0">
<tr>
<td><div align="center" class="style1">For all booking inquiries please email</div></td>
</tr>
<tr>
<td><div align="center"><a href="mailto:thedopplereffectrock@hotmail.com">thedopplereffectrock@hotmail.com</a></div></td>
</tr>
</table>
</div>

<div class="masthead">
<html>
<head>
<title>Untitled-1</title>

</head>
<body bgcolor="FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="800" height="541" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src=http://www.captive-clothing.com/tde/images/Untitled-1_01.gif" width="800" height="14" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src=http://www.captive-clothing.com/tde/images/Untitled-1_02.gif" width="800" height="289" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src=http://www.captive-clothing.com/tde/images/Untitled-1_03.gif" width="800" height="139" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src=http://www.captive-clothing.com/tde/images/Untitled-1_04.gif" width="455" height="42" alt=""></td>
<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnB1cmV2b2x1bWUuY29tL3RoZWRvcHBsZXJlZmZlY3RueQ==">
<img src=http://www.captive-clothing.com/tde/images/Untitled-1_05.gif" width="146" height="42" border="0" alt=""></a></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmZhY2Vib29rLmNvbS9wZW9wbGUv">
<img src=http://www.captive-clothing.com/tde/images/Untitled-1_06.gif" width="199" height="42" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD0yOTU3NTgwOQ==">
<img src=http://www.captive-clothing.com/tde/images/Untitled-1_07.gif" width="269" height="35" border="0" alt=""></a></td>
<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0yOTU3NTgwOSZNeVRva2VuPWEwMTRiOTU5LTc5M2ItNGI0Yy1iZTMyLTExOWY4M
ViZDBmNA==">
<img src=http://www.captive-clothing.com/tde/images/Untitled-1_08.gif" width="221" height="35" border="0" alt=""></a></td>
<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTI5NTc1ODA5Jk15
G9rZW49MTE0YjA1NWItYjJhMi00ODkwLWE5NDMtOWQ3YzE2NDFiMzM5">
<img src=http://www.captive-clothing.com/tde/images/Untitled-1_09.gif" width="310" height="35" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="5">
<img src=http://www.captive-clothing.com/tde/images/Untitled-1_10.gif" width="800" height="21" alt=""></td>
</tr>
<tr>
<td>
<img src=http://www.captive-clothing.com/tde/images/spacer.gif" width="269" height="1" alt=""></td>
<td>
<img src=http://www.captive-clothing.com/tde/images/spacer.gif" width="186" height="1" alt=""></td>
<td>
<img src=http://www.captive-clothing.com/tde/images/spacer.gif" width="35" height="1" alt=""></td>
<td>
<img src=http://www.captive-clothing.com/tde/images/spacer.gif" width="111" height="1" alt=""></td>
<td>
<img src=http://www.captive-clothing.com/tde/images/spacer.gif" width="199" height="1" alt=""></td>
</tr>
</table>
</body>
</html>
</div>

<style type="text/css">

{THIS MAKES THE BODY TABLE TRANSPARENT}
{*NOTE* - IF YOU DO NOT WANT THE BODY TABLE TRANSPARENT, SIMPLY CHANGE TRANSPARENT TO A COLOR}
table, tr, td{background-color:transparent;}

body, body.bodycontent{
background-color: FFFFFF;
background-image:url(http://www.captive-clothing.com/tde/images/background.gif);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
overflow-x: hidden;
}

{THIS EDITS THE MAIN TEXT STYLE AND COLORS}
body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:FFFFFF;
font-size:10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:arial;
}

{THIS CHANGES COLOR AND STYLE OF NAMETEXT AND HEADINGS}
.orangetext15, text, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{
color:FFFFFF;
font-size:8pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:arial;
}

{THIS CHANGES COLOR AND STYLE OF LINKS}
a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{
color:FFFFFF;
font-size:8pt;
font-weight:bold;
font-style:normal;
text-decoration:none;
text-transform:bold;
font-family:arial;
}

{THIS CHANGES COLOR AND STYLE OF LINKS ON HOVER}
a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{
color:FFFFFF;
font-size:8pt;
font-weight:bold;
font-style:normal;
text-decoration:none;
text-transform:bold;
font-family:arial;
}

{THIS ALSO MAKES THE BODY TABLE TRANSPARENT AND MAKES SURE ALIGNMENTS ARE FINE}
{NOTHING NEEDS TO BE CHANGED HERE EXCEPT IF YOU WANT THE FONT CHANGED}
p {margin: 0px 0px 1em 0px; font-family: arial !important}
body>div {margin-left: 0px;}
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 0px 0px 0px}
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 {
background-color: transparent;
border: 0 solid;
border-color: transparent;
width: 100%;
}
object {position:relative; z-index:1;}

body td table, body div table {margin-top: 0px;}
.a {hide URL label}
.a {hide top links}
.a {unhide navigation bar}
.navbar {visibility:visible;}

{THIS HIDES BASICALLY EVERYTHING ON THE LEFT SIDE]
{*NOTE* - IF YOU DON'T WANT THE LEFT SIDE HIDDEN, TAKE OUT EVERYTHING BUT .ORANGETEXT15 AND .WHITETEXT12}
.contactTable {display: none;}
.orangetext15 {display: none;}
.navigationbar {display: none;}
.userprofileurl {display: none;}
.profileInfo{display:none;}
.whitetext12 {display: none;}
img {border:0px;}

{THIS HIDES UNNECESSARY BORDER LINES WHEN HIDING SECTIONS}
table table table table div {visibility:hidden;}
div table table table table table div input, div a, td.text div {visibility:visible;}
table table table table div {visibility:hidden;}
div table table table table table div input, div a, td.text div {visibility:visible;}


</style>

<img src="http://www.captive-clothing.com/tde/images/right_endorsements.gif">
Mickey
Nov 13 2008, 02:50 PM
Try removing this from your codes:

CODE
object {position:relative; z-index:1;}
timebomb606
Nov 13 2008, 02:55 PM
now its showing correctly, but i cant move it down. its up a little bit too high.
Mickey
Nov 13 2008, 03:03 PM
Look for this at the top of your codes:

CODE
<style>
table table td.text object {position:absolute; top:750px; left:450px;}
</style>

Replace the left margin with 50% then add a margin-left attribute. That will have it looking right on all browsers. It should look like this:

CODE
<style>
table table td.text object {position:absolute; top:#px; left:50%; margin-left:#px;}
</style>

Just replace the #s with the appropriate amount of pixels to position your player properly. That means both the top and margin-left attribute.
timebomb606
Nov 13 2008, 03:19 PM
i changed it like you said, the left: attribute, even at 0 isnt in the right place. it will not let me more it more to the left..its still slightly off though.

if i change the left: 50% to 46% its perfect.

i know it should be on 50% but not sure why it wont let me move more to the left then.
Mickey
Nov 13 2008, 03:28 PM
Posts merged. Next time, use the edit button instead of double-posting.

You're supposed to leave left to 50%. Then, if you still need to move it more to the right or to the left, replace the number sign in the margin-left attribute with the proper amount of pixels. If you want it to go to the right, leave it with just the number. If you want it to go the left, add a minus sign (-) before the number. The margin-left attribute is the one after the left attribute, by the way.
timebomb606
Nov 13 2008, 03:32 PM
right, i had the left at 50%, but the left: #px i have at 0 px and its still not lined up, so i tried changing to -5 or -10px and its not moving past 0 px.

not sure why.
Mickey
Nov 13 2008, 03:34 PM
Which attribute(s) are you changing? You're supposed to be editing only the bold sections of the code below:

CODE
<style>
table table td.text object {position:absolute; top:#px; left:50%; margin-left:#px;}
</style>
timebomb606
Nov 13 2008, 03:36 PM
QUOTE(Anarchy @ Nov 13 2008, 03:34 PM) *
Which attribute(s) are you changing? You're supposed to be editing only the bold sections of the code below:

this is what i have in my code right now....

CODE
<style>
table table td.text object {position:absolute; top:750px; left:50%; margin-left:-15px;}
</style>


but the player is still too far to the right. if i change that margin-left: to -500px...it doesnt move at all.






EDIT : nevermind, i got it.

now the only thing is that it seems like the "play" button is covered up...the bottom half of the music player is fine, the top half seems to be covered..i cant change the volume or pause it...
Mickey
Nov 13 2008, 03:42 PM
It looks fine to me. Try clearing your cache then refreshing a few times.
timebomb606
Nov 13 2008, 03:45 PM
you can click and move the volume button and the play/pause button works for you?

The whole part of the music player above the gray " plays, downloads..." bar..isnt working for me. I have cleared the cache and refreshed a few times also.


EDIT : I got it. the "height" on the 'masthead' div was too high. it was covering it up...i change it to lower and its good.

THANKS SO MUCH FOR YOUR HELP MAN! YOUR AWESOME!
Mickey
Nov 13 2008, 03:52 PM
Okay, try replacing the codes you're currently using to move the music player with this:

CODE
object {position:absolute; top:750px; left:50%; margin-left:-55px;}
tokyo-rose
Jul 16 2009, 05:30 PM
Topic Closed, and Moved to Myspace Resolved Topics. Please PM a moderator if you would like this reopened.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.