Help - Search - Members - Calendar
Full Version: header alignment issues
Forums > Resource Center > Support Center > MySpace Support > Myspace Resolved Topics
louisenatephoto
Hey guys,
I've had this problem repeatedly with layouts I've designed, basically I can never seem to get the header aligned right. It looks fine on my monitor, but on most of my friends there is a white line to the left.

Here's my code - keep in mind that lots of things aren't aligned properly (twitter boxes, music player, etc) since i want to solve this before I do any more work on it.

edit: here is what it looks like on my friends monitor. 13" macbook

click to enlarge



Any help is appreciated.

CODE
<style>

body {
background-color:2a636f;
background-image: url(http://img691.imageshack.us/img691/122/parabg.jpg) ;
background-position:top center;
background-repeat:no-repeat;
background-attachment: scroll; }

table, tr, td {
background-color: transparent;
border: 0px;
}


.i {display:none;}
table table td.text div object {position:relative; top:-115px; right:160px; z-index:9;}
table table td.text div object object {position:static; z-index:9;}



.profileWidth table { margin-bottom:2000px; width:800px; }
.gap {
background: top left no-repeat;
width:900px; height:0px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -2022px;
}


.orangetext15, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{
color: rgb(3,3,3);
font-weight:bold;
font-style:normal;
text-decoration:none;
text-transform:none;
}

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: 1d1b1e;
font-weight:normal;
font-style:normal;
text-decoration:underline ;
text-transform:none;
}

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{
font-weight:normal;
font-style:normal;
text-decoration:underline ;
text-transform:none;
}

.about {display:none;}

.contactTable {display: none;}

td td td td {visibility:hidden;}
td td.text td, td td td td div {visibility:visible;}

.i {display:none;}
{!-eliminate bio header!-}
table table td.text table td.text {display:none;}
{!-recover in shows and friends-!}
table table td.text div table td.text,
table table td.text table.friendSpace td.text {display:inline;}

{!-eliminate the orange line that shows up in IE.
This WILL mess up background coloring used in shows, friends and comments !}
table table td.text table {background-color:transparent;}

.maincontent{
position: absolute;
width: 0px;
height: 2374px;
margin-left: -450px;
left: 50%;
top: 0px;
z-index:1;
}

.dihdesigns {
position: absolute;
top: 0px;
left: 0px;
z-index:3;}

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

.rollovers {
position: absolute;
top: 0px;
left: 50%;
height: auto;
width: auto;
overflow:
visible;
background-color: none;
margin-left: -450px; text-align: center; z-index:2;}

</style>


<div class="rollovers">
</div>

<div class="maincontent">
<table id="Table_01" width="901" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="17">
<img src="http://img696.imageshack.us/img696/4003/slice1.jpg" width="901" height="160" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img709.imageshack.us/img709/8662/slice2.jpg" width="901" height="160" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img682.imageshack.us/img682/4083/slice3.jpg" width="901" height="160" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img28.imageshack.us/img28/174/slice4.jpg" width="901" height="160" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img682.imageshack.us/img682/2288/slice5.jpg" width="901" height="160" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img130.imageshack.us/img130/6942/slice6.jpg" width="901" height="160" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img641.imageshack.us/img641/1030/slice7.jpg" width="901" height="160" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img709.imageshack.us/img709/9106/slice8.jpg" width="901" height="82" alt="" /></td>
</tr>
<tr>
<td colspan="8">
<img src="http://img714.imageshack.us/img714/4879/slice9.jpg" width="323" height="50" alt="" /></td>
<td colspan="4">
<img src="http://img714.imageshack.us/img714/1122/purevolumealtered.jpg" width="281" height="50" alt="" /></td>
<td colspan="3">
<img src="http://img696.imageshack.us/img696/7977/youtubealtered.jpg" width="99" height="50" alt="" /></td>
<td colspan="2">
<img src="http://img714.imageshack.us/img714/6779/facebookaltered.jpg" width="198" height="50" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="http://img709.imageshack.us/img709/3012/slice10.jpg" width="24" height="51" alt="" /></td>
<td colspan="2">
<img src="http://img714.imageshack.us/img714/6308/addaltered.jpg" width="94" height="51" alt="" /></td>
<td colspan="2">
<img src="http://img641.imageshack.us/img641/2982/msgaltered.jpg" width="103" height="51" alt="" /></td>
<td colspan="2">
<img src="http://img709.imageshack.us/img709/8568/favealtered.jpg" width="102" height="51" alt="" /></td>
<td colspan="4">
<img src="http://img696.imageshack.us/img696/5199/commentaltered.jpg" width="281" height="51" alt="" /></td>
<td colspan="5">
<img src="http://img94.imageshack.us/img94/1302/slice11.jpg" width="297" height="51" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img696.imageshack.us/img696/3537/slice12.jpg" width="901" height="160" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img94.imageshack.us/img94/8398/slice13.jpg" width="901" height="160" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img709.imageshack.us/img709/4323/slice14.jpg" width="901" height="158" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img691.imageshack.us/img691/9397/slice15.jpg" width="901" height="71" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img src="http://img682.imageshack.us/img682/3614/slice16.jpg" width="60" height="32" alt="" /></td>
<td colspan="2">
<img src="http://img714.imageshack.us/img714/7631/saydehaltered.jpg" width="98" height="32" alt="" /></td>
<td colspan="2">
<img src="http://img94.imageshack.us/img94/3135/slice17.jpg" width="100" height="32" alt="" /></td>
<td colspan="3">
<img src="http://img682.imageshack.us/img682/2319/chrisdipardoaltered.jpg" width="160" height="32" alt="" /></td>
<td>
<img src="http://img682.imageshack.us/img682/2718/slice18.jpg" width="67" height="32" alt="" /></td>
<td colspan="2">
<img src="http://img709.imageshack.us/img709/4880/alexstcroixaltered.jpg" width="142" height="32" alt="" /></td>
<td>
<img src="http://img696.imageshack.us/img696/2944/slice19.jpg" width="62" height="32" alt="" /></td>
<td colspan="2">
<img src="http://img709.imageshack.us/img709/8646/myleshaywardaltered.jpg" width="175" height="32" alt="" /></td>
<td>
<img src="http://img691.imageshack.us/img691/6655/slice20.jpg" width="37" height="32" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img682.imageshack.us/img682/6718/slice21.jpg" width="901" height="8" alt="" /></td>
</tr>
<tr>
<td>
<img src="http://img682.imageshack.us/img682/8715/slice22.jpg" width="21" height="360" alt="" /></td>
<td colspan="8">
<img src="http://img691.imageshack.us/img691/4001/stackaltered.jpg" width="386" height="360" alt="" /></td>
<td colspan="8">
<img src="http://img682.imageshack.us/img682/4338/slice23.jpg" width="494" height="360" alt="" /></td>
</tr>
<tr>
<td colspan="17">
<img src="http://img130.imageshack.us/img130/2647/slice24.jpg" width="901" height="62" alt="" /></td>
</tr>
<tr>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="21" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="3" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="36" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="58" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="40" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="63" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="37" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="65" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="84" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="11" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="67" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="119" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="23" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="62" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="14" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="161" height="1" alt="" /></td>
<td>
<img src="http://img28.imageshack.us/img28/3648/spacerlt.gif" width="37" height="1" alt="" /></td>
</tr>
</table>
</div>

<div class="contact">
<table width="350px" border="0" cellspacing="3" cellpadding="3">
<tr><div align="center"><img src="http://img6.imageshack.us/img6/5447/contactheader.png" /></tr>
<tr>
<td><b>Hometown:</b> </td><td><div align="right">Mississauga ON</div></td>
</tr>
<tr>
<td><b>URL</b></td><td><div align="right"><a href="http://www.myspace.com/weareparamount">/weareparamount</a></div></td>
</tr>
<tr>
<td><b>Booking</b></td>
<td><div align="right">Chris DP Entertainment<br /><a href="mailto:chris.dpbooking@gmail.com">chris.dpbooking@gmail.com</a></div></td>
</tr>
</div>

<tr>
<td><b>Management</b></td>
<td><div align="right">Zach Blay Silvertongue Management<br /><a href="mailto:zblay.silvertonguerecords@gmail.com">zblay.silvertonguerecords@gmail.com</a></div></td>
</tr>
<tr>
<td><b>Label</b></td>
<td><div align="right">Unsigned</div></td>
</tr>
<tr>
<td><b>Publicity</b></td><td><div align="right">Alex Draper Millan<br /> <a href="mailto:alex.vanitymag@gmail.com">alex.vanitymag@gmail.com</a></div></td>

</tr>
<tr>
<td><b>Layout</b></td>
<td><div align="right"><a href="/sirsneak"><img /><br />Dine In Hell Designs</a></div></td>
</tr>
</table></td></tr>
</div>
</a>



<div class="matttwitter">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="176" width="176" align="middle">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=255&type=user&id=17237918" />
<param name="quality" value="high" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="176" width="176" align="middle" wmode="transparent" flashvars="color1=255&type=user&id=17237918" quality="high" />
</object><br /></div></div>


<div class="mylestwitter">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="176" width="176" align="middle">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=255&type=user&id=111713338" />
<param name="quality" value="high" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="176" width="176" align="middle" wmode="transparent" flashvars="color1=255&type=user&id=111713338" quality="high" />
</object><br /></div></div>


<div class="alextwitter">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="176" width="176" align="middle">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=255&type=user&id=28490882" />
<param name="quality" value="high" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="176" width="176" align="middle" wmode="transparent" flashvars="color1=255&type=user&id=28490882" quality="high" />
</object><br /></div></div>

<div class="christwitter">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="176" width="176" align="middle">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://twitter.com/flash/twitter_badge.swf" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=255&type=user&id=75385562" />
<param name="quality" value="high" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://twitter.com/flash/twitter_badge.swf" height="176" width="176" align="middle" wmode="transparent" flashvars="color1=255&type=user&id=75385562" quality="high" />
</object><br /></div></div>

<style>
.contact{
position: absolute;
margin-left: 100px;
top: 209px;
z-index: 4;
}

.matttwitter{
z-index:2 !important;
position:absolute;
left: 50%;
margin-left:-260px;
top: 1791px;
text-align:center;
visibility: visible !important;

}

.mylestwitter{
z-index:2 !important;
position:absolute;
left: 50%;
margin-left:600px;
top: 1791px;
text-align:center;
visibility: visible !important;

}

.christwitter{
z-index:2 !important;
position:absolute;
left: 50%;
margin-left:100px;
top: 1791px;
text-align:center;
visibility: visible !important;

}

.alextwitter{
z-index:2 !important;
position:absolute;
left: 50%;
margin-left:350px;
top: 1791px;
text-align:center;
visibility: visible !important;

}



</style>


louisenatephoto
So I need to slice the header as one piece?
I can't really do that if I want to have rollovers, though.
Any other solutions?
Mickey
The point is you don't have to slice anything. Just use the entire layout image as your background. If you're working with rollovers, follow #4 on Elia's post from that same topic.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.