Help - Search - Members - Calendar
Full Version: Band layout problems
Forums > Resource Center > Support Center > MySpace Support > Myspace Resolved Topics
TAvisions
Feb 25 2010, 12:59 AM
So Ive been using the myspace band tutorial that is a sticky topic in these forums...and I have a couple questions/problems that I was hoping some kind people could help me with.

First, The band layout looks fine in Google Chrome but in FIrefox the top banner hover part is below the original top banner. How can I fix this?
see: http://www.myspace.com/bandlayout814

Second, The about me section shows up randomly right under the top banner on the left side of the profile (not under the blogs like its supposed to) how can I fix this?

Third, the shows banner is overlapping the actual show posts and i do not think it is the left div box width causing it...How do i fix this?

I know im asking a lot, I just want to get this down so I wont worry about it anymore haha so I would very much appreciate any help. Again im using the tutorial for band myspace on createblog as a reference and the band myspace is http://www.myspace.com/bandlayout814

-Thank you


EDIT: I just checked it out in Internet Explorer and it really messed up lol, I didnt notice bc i never use IE. So now im really confused as to what to do, I guess I really need it to workout for Firefox and IE mostly bc thats what most ppl use...
TAvisions
Feb 25 2010, 05:22 PM
k thanks a lot man i appreciate it.

hey man just wondering if ur still gonna check this out im stuck lol...
Mickey
Feb 27 2010, 07:55 AM
You had unnecessary table tags that messed up the structure of the default MySpace tables. Replace your Bio codes with this:

CODE
<style>
.profileWidth table { margin-bottom:801px; width:800px; }
.rail { display:none; }
.gap {
background: top left no-repeat;
width:847px; height:801px;
position:absolute; top:0; left:50%;
margin:0px 0 -417px -801px;
</style>

<div class="gap"></div>



<style>
.topbannerhover {position:absolute; top:170px; left:50%; margin-left:-417px; _margin-left:-417px; width:847px; height:801px; z-index:8;}

div.topbanner a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 847px;
height: 800px;
z-index:9;
}

.topbanner {position:absolute; top:170px; left:50%; margin-left:-417px; _margin-left:-417px; width:847px; height:801px; z-index:9;}
</style>




<div class="topbannerhover">
<table id="Table_01" width="847" border="0" cellpadding="0" cellspacing="0">

<tr>
<td colspan="6">
<img src="http://img517.imageshack.us/img517/622/code01.jpg" width="847" height="680" alt="" /></td>
</tr>

<tr>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD0yNDUzMDExMzg=">
<img src="http://img23.imageshack.us/img23/2006/newlayout02.jpg" width="145" height="67" border="0" alt="" /></a></td>

<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0yNDUzMDExMzg=">
<img src="http://img213.imageshack.us/img213/8731/newlayout03.jpg" width="165" height="67" border="0" alt="" /></a></td>
<td>
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=245301138">

<img src="http://img163.imageshack.us/img163/7884/newlayout04.jpg" width="157" height="67" border="0" alt="" /></a></td>
<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vbWFpbC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1tYWlsLmZvcndhcmQmZnJpZW5kSUQ9MjQ1MzAxMTM4JmY9Zm9yd2FyZHByb2ZpbGU=">

<img src="http://img193.imageshack.us/img193/4233/newlayout05.jpg" width="153" height="67" border="0" alt="" /></a></td>
<td>
<a href="http://www.myspace.com/index.cfm?fuseaction=block.blockUser&userID=245301138">
<img src="http://img109.imageshack.us/img109/281/newlayout06.jpg" width="227" height="67" border="0" alt="" /></a></td>
</tr>
<tr>

<td colspan="2">
<img src="http://img63.imageshack.us/img63/4046/code07.jpg" width="310" height="53" alt="" /></td>

<td colspan="2">
<img src="http://img17.imageshack.us/img17/1614/code08.jpg" width="250" height="53" alt="" /></td>
<td colspan="2">
<img src="http://img651.imageshack.us/img651/4884/code09.jpg" width="287" height="53" alt="" /></td>
</tr>
<tr>
<td>

<img src="http://img16.imageshack.us/img16/6342/spacerpic.gif" width="145" height="1" alt="" /></td>

<td>
<img src="http://img16.imageshack.us/img16/6342/spacerpic.gif" width="165" height="1" alt="" /></td>
<td>
<img src="http://img16.imageshack.us/img16/6342/spacerpic.gif" width="157" height="1" alt="" /></td>
<td>
<img src="http://img16.imageshack.us/img16/6342/spacerpic.gif" width="93" height="1" alt="" /></td>
<td>
<img src="http://img16.imageshack.us/img16/6342/spacerpic.gif" width="60" height="1" alt="" /></td>

<td>
<img src="http://img16.imageshack.us/img16/6342/spacerpic.gif" width="227" height="1" alt="" /></td>
</tr>
</table>

</div>






<div class="topbanner">
<table id="Table_01" width="847" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img src="http://img297.imageshack.us/img297/622/code01.jpg" width="847" height="682" alt="" /></td>
</tr>

<tr>

<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD0yNDUzMDExMzg=">
<img src="http://img708.imageshack.us/img708/2006/newlayout02.jpg" width="145" height="66" border="0" alt="" /></a></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0yNDUzMDExMzg=">
<img src="http://img203.imageshack.us/img203/8731/newlayout03.jpg" width="164" height="66" border="0" alt="" /></a></td>
<td>
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=245301138">

<img src="http://img38.imageshack.us/img38/7884/newlayout04.jpg" width="158" height="66" border="0" alt="" /></a></td>
<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vbWFpbC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1tYWlsLmZvcndhcmQmZnJpZW5kSUQ9MjQ1MzAxMTM4JmY9Zm9yd2FyZHByb2ZpbGU=">
<img src="http://img683.imageshack.us/img683/4233/newlayout05.jpg" width="155" height="66" border="0" alt="" /></a></td>
<td>
<a href="http://www.myspace.com/index.cfm?fuseaction=block.blockUser&userID=245301138">
<img src="http://img24.imageshack.us/img24/281/newlayout06.jpg" width="225" height="66" border="0" alt="" /></a></td>
</tr>
<tr>

<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnlvdXR1YmUuY29t">
<img src="http://img7.imageshack.us/img7/803/newlayout07.jpg" width="309" height="52" border="0" alt="" /></a></td>
<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnR3aXR0ZXIuY29t">
<img src="http://img534.imageshack.us/img534/9844/newlayout08.jpg" width="258" height="52" border="0" alt="" /></a></td>
<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmZhY2Vib29rLmNvbS8=">

<img src="http://img30.imageshack.us/img30/2205/newlayout09.jpg" width="280" height="52" border="0" alt="" /></a></td>

</tr>
<tr>
<td>
<img src="http://img214.imageshack.us/img214/5862/spacermn.gif" width="145" height="1" alt="" /></td>
<td>
<img src="http://img214.imageshack.us/img214/5862/spacermn.gif" width="164" height="1" alt="" /></td>
<td>

<img src="http://img214.imageshack.us/img214/5862/spacermn.gif" width="158" height="1" alt="" /></td>
<td>

<img src="http://img214.imageshack.us/img214/5862/spacermn.gif" width="100" height="1" alt="" /></td>
<td>
<img src="http://img214.imageshack.us/img214/5862/spacermn.gif" width="55" height="1" alt="" /></td>
<td>
<img src="http://img214.imageshack.us/img214/5862/spacermn.gif" width="225" height="1" alt="" /></td>
</tr>

</table>

</div>


<style>
html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry{
background-color: transparent !important;
color: 000000 !important;
width: 451px !important;
border-collapse: collapse !important;
margin-bottom: 0px !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 15px !important;
padding: 0 !important;
table-layout: fixed !important;
position: relative !important;
background-image: url(http://img6.imageshack.us/img6/9244/newsun.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
overflow: hidden;
_background-position: 0px 2px;
_margin-left: -4px !important;
_margin-top: 0px !important;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr{
display: inline;
margin: 0 !important;
padding: 0 !important;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td{
display: block !important;
margin: 0 !important;
padding: 0 !important;
width: 449px !important;
font-family: Arial;
color: ffffff !important;
clear: both !important;
font-size: 1px !important;
line-height: 0px;
vertical-align: middle;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td a{
float: right;
line-height: 35px;
color: ffffff;
padding: 0px !important;
margin: 0px !important;
padding-right: 5px !important;
position: relative;
z-index: 6;
font-weight: normal;
font-size: 10px !important;
display: block;
height: 35px;
text-transform: Capitalize;
_font-size: 10px !important;
_width:120px;
_text-align:right;
_font-weight: normal;
_postion: absolute !important;
_margin-top: -4px !important;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td span.text{
line-height: 35px;
position: absolute;
display: block;
border-bottom: 1px dotted dimgray;
border-color: ffffff;
width: 443px;
color: ffffff;
padding: 0px !important;
margin: 0px !important;
padding-left: 5px !important;
z-index: 5;
font-weight: normal;
font-size: 10px !important;
height: 35px;
_font-size: 10px !important;
_margin-top: -3px !important;
_font-weight: normal !important;
_margin-left: -3px !important;
_width:449px;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td span.btext{
display: block;
float: left;
width: 50px !important;
height: 43px;
font-size: 1px;
overflow: hidden;
color: ffffff !important;
line-height: 300px;
}
</style>



<style>
html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td span.orangetext15{
display: block !important;
height: 45px !important;
width: 451px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 1px;
overflow: hidden;
background-image: url(http://img171.imageshack.us/img171/4333/friendsyw.jpg);
background-repeat: no-repeat;
color: 000000 !important;
line-height: 10px !important;
margin-top: -3px !important;
}
</style>



<style>
table table table table td.text span.whitetext12 {
position: relative;
top: 0px;
display: block;
left: 0px;
visibility: visible;
width: 1px;
height: 10px;
text-indent: -999999px;
background: transparent bottom left no-repeat;
}
</style>

<style>
.shows {position:absolute; top:1244px; left:50%; margin-left:-63px; _margin-left:px; width:451px; height:52px; z-index:1;}
</style>

<div class="shows">
<img src="http://img98.imageshack.us/img98/5579/headertemp.jpg" />:
</div>






<style>

.orangetext15 {display: none;}
.whitetext12 {display: none;}

table table div embed, table table div object {position:relative; z-index:9;}

table, tr, td{
background-color:transparent;
border-style:none;
}

body {
background-color: 000000;
background-image: url(http://img218.imageshack.us/img218/1844/backgroundpo.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}

table table table table, table table table td{
background-image:none;
background-color:transparent;
}

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:FFFFFF;
font-size:9pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

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:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a {
color: FFFFFF !important;
font-family: Arial !important;
}

a:hover {
color: 666666 !important;
font-family: Arial !important;
}

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:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

table table table table, div table table table{
border-style:none;
}

</style>



<style>
.tg_left {position:absolute; top:840px; left:50%; margin-left:-405px; _margin-left:-405px; width:320px; height:1200px; z-index:1;}
</style>

<div class="tg_left">
<img src="http://img69.imageshack.us/img69/6140/leftbox.jpg" />
</div>
TAvisions
Feb 27 2010, 05:15 PM
Im sorry man I didnt want to seem impatient thats why i wasnt going to post at first I just wasnt sure if you remembered because Im sure your busy with helping a lot of people as well as your own life...thank you though I will try this and I very much appreciate the help its nice to have people like you who care and try to help thank you.. If I have any more questions I will ask and will be patient (sorry again)

Also sorry about the double post I didnt think to edit my post.

-Thank you


EDIT: It works great, in internet explorer its still really wierd (the top banner) but if thats a hard problem to solve im not too worried about it. But thank you that helped me out so much.. =)
Mickey
Feb 27 2010, 07:02 PM
Look for this near the top:

CODE
div.topbanner a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 847px;
height: 800px;
z-index:9;
}

Replace it with this:

CODE
div.topbanner a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 0px;
height: 0px;
z-index:9;
}

That should do the trick.
TAvisions
Feb 27 2010, 08:31 PM
thank you very much Mike, that worked. I appreciate the help, you saved me hours of confusion and me wanting to throw my computr haha but seriously thank you.

EDIT: one last question and im pretty sure Ill have everything I need. My Shows banner goes under the bottom of the music player but if i move it down it goes over the show postings...is there a way to position it so that it will be right above the shows and maybe move the show postings down or something? Thank you again i really appreciate this help.
Mickey
Feb 28 2010, 05:26 AM
Follow #3 on this post to put up the Upcoming Shows header instead of the method you're using now.
TAvisions
Feb 28 2010, 06:31 AM
Thank you, I think I ended up fixing it just by editing a mistake I made in my code (to make a space right after the music player) but you have helped me out greatly and for that I thank you... I am pretty sure I now understand everything that I was confised about.

Thank you again
Mickey
Feb 28 2010, 06:48 AM
No problem, mate. Topic closed & moved.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.