positioning help Options

[shynomi]

My headers are always off by 1 px either in safari or FF. I can get it right in IE and FF but it'll be off by a pixel in Safari or vice versa.

Here is my code for the top header:

CODE

<div id="BannerUnderTopNav" style="position:absolute; z-index:2; margin-left:-346px;  _margin-left:-333px; top: 0px; background-color:COLOR; background-image:URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/header1.jpg); background-repeat: no-repeat; background-position: bottom center; width:823px; height:2017px; overflow:no;}">

</div>

I have the _margin-left: xxx for IE and the other margin attribute for FF and Safari.
But as you can see here: http://www.myspace.com/frucatestpage

it'll be a px off in FF but right in safari.

Let me know if there's something I can add in the code to fix that.
Thanks guys!

[Mickey]

Where's the left: 50%; property? Also, remove the unnecessary bracket (}) before the closing quotation marks.

[shynomi]

took out the unnecessary bracket.
tried putting in the 50% attribute but still didn't fix the 1pixel off problem.

i'll post my entire code just in case it's not in that section.

CODE

<style>
.profileWidth {
padding-bottom:1806px !important;}
</style>


<div id="BannerUnderTopNav" style="position:absolute; z-index:2; margin-left:-346px; _margin-left:-333px; top: 0px; background-color:COLOR; background-image:URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/header1.jpg); background-repeat: no-repeat; background-position: bottom center; width:823px; height:2017px; overflow:no;">




</div>




<style>
.tg_left {position:absolute; margin-top:-0px; margin-left:-410px; left:50%; top:2276px; width:315px; height:700px; background-color:transparent; z-index:2;}
</style>




<div class="tg_left">

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/followusline.jpg" /><br /><br />

<center><div style="width:176px;text-align:center"><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=3368703&type=user&id=26273637" />
<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=3368703&type=user&id=26273637" quality="high" />
</object><br /><a style="font-size: 10px; color: 000000; text-decoration: none" href="http://www.msplinks.com/MDFodHRwOi8vdHdpdHRlci5jb20vVGhvc2VWaWN0b3Jpb3Vz">FOLLOW US!</a></div>
</center>
<br /><br />

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/supportline.jpg" /><br /><br />


<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/sponsors.png" /><br /><br />

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/releaseline.jpg" /><br /><br />

<table id="Table_01" width="315" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/release_01.png" width="315" height="700" alt="" /></td>
</tr>

<tr>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vaXR1bmVzLmFwcGxlLmNvbS91cy9hbGJ1bS9vbi1sb3ZlL2lkMjcwMTk5Mzc2P2k9Mjcw
Tk5MzgyJnVvPTY=" target="_blank">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/release_02.png" width="139" height="36" border="0" alt="" /></a></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmFtYXpvbi5jb20vVGhlLUdsb3J5LURheXMvZHAvQjAwMTFUVUdYMC9yZWY9c3Jf
V8yP2llPVVURjgmcz1kbXVzaWMmcWlkPTEyNjg1MjUxNTUmc3I9OC0y" target="_blank">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/release_03.png" width="176" height="36" border="0" alt="" /></a></td>
</tr>
</table>
<br /><br />






<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/infoline.jpg" /><br /><br />





<table width="250px" border="0" cellspacing="3" cellpadding="3">
<tr>

<td>_HOMETOWN</td><td><div align="right">Frederick, MD</div></td>
</tr>

<tr>

<td>_GENRE</td><td><div align="right">Rock/Pop/Indie</div></td>
</tr>

<tr>

<td>_WEBSITE</td><td><div align="right"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnRob3NldmljdG9yaW91cy5jb20=">http://www.thosevictorious.com</a></div></td>
</tr>




<tr>
<td>_MANAGEMENT</td>
<td><div align="right"><a href="mailto:http://www.myspace.com/alluremediaentertainment">Allure Media Entertainment</a><br /></div></td>
</tr>


<tr>

<td>_LABEL</td><td><div align="right">BDS Music, LLC <i>indie</i></div></td>
</tr>



<tr>
<td>_LAYOUT</td>
<td><div align="right"><a href="mailto:frucafrucaposters@gmail.com">Fruca Fruca Design</a><br /></div></td>
</tr>



</table>


<br />







</div>


<style>ul li a:link, ul li a:active, ul li a:visited ul li a.open:visited, ul li a:link, ul li a:active, ul li a:visited {font: bold 10px arial !important; letter-spacing: -1px !important; text-transform: uppercase; margin-top: 7px; text-align:left;}</style>


<style>.whitetext12{visibility:hidden; display:none;}.lightbluetext8{visibility:hidden; display:none;}</style>

<style>
.friendText {display:none}
.redLink {display:none}
</style>



<style>

{THIS MAKES THE BODY TABLE TRANSPARENT}
{*NOTE* - IF YOU DO NOT WANT THE BODY TABLE TRANSPARENT, SIMPLY CHANGE TRANSPARENT TO A COLOR}


body{ font-size:x-small;
background-color:cbc8af;
background-image:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/bg2.jpg);
background-attachment:scroll;
background-repeat: no-repeat;
background-position:top center;
margin-top: 0px;}


{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:000000;font-size:8pt;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:000000;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:1e2d4c;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:000000;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;}

</style>

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/bioline.jpg" /><br /><br />

<b>
Hailing from Frederick, Maryland, Brian Severn & Those Victorious are quickly proving to be tenacious self starters. Writing and performing highly melodic compositions with emotionally intelligent lyrics and big catchy hooks, it’s evident that their inspiration comes from within. The band which began as a solo acoustic project featuring Brian Severn has grown into a solid song-oriented powerhouse.<br /><br />

Brian began playing guitar at age 10 and started writing and performing by age 12. After watching Green Day’s Woodstock Performance on television he knew instinctively what he had to do.<br /><br />

The band features Brian Severn on guitar and lead vocal, with Paddy Mayonnaise on drums/percussion, and Chris "Playboy" Martin on bass. Inspired by, and exhibiting a sound in the vein of artists such as Green Day, Everclear, GlassJaw, Alkaline Trio, and Tom Petty, the band has recently completed their second EP produced by Grammy™nominated engineer/producer David Ivory (The Roots, Halestorm, Silvertide, Patti LaBelle).<br /><br />

Brian Severn & Those Victorious are dead serious in the quest to create awareness for their project. Continuing to seek guidance from David Ivory and engaging Artist Management and Music Marketing firm Allure Media Entertainment, Philadelphia, PA to assist in the furtherance of their career, the band seems destined for Independent Success.<br /><br />

Their second EP entitled “Wonderboy”, officially released in February 2008, is now available online at their websitewww.thosevictorious.com, Best Buy, and digitally on iTunes. The band has begun touring extensively in support of their new release and is heading back into the studio in mid 2009 to record a new single with the assistance of producer David Ivory. To stay informed on the bands scheduled shows or for more information on Brian Severn & Those Victorious, you can visit their websites or contact their management. <br /><br />

<center><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LlRob3NlVmljdG9yaW91cy5jb20=">www.ThoseVictorious.com</a>
</b></center>

<br /><br />

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/newsline.jpg" /><br /><br />

<b>NEW LAYOUT // 08.11.09</b><br />

We have a brand new layout courtesy of our friend Jan at Applicant Apparel. Look for more updates soon!<br /><br />

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/promoline.jpg" /><br /><br />

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/bannerr.gif" /><br /><br />

<center>COPY & PASTE<br />
<textarea><a href="http://www.myspace.com/briansevernandthosevictorious"><img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/bannerr.gif"></a></textarea><br /><br />

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/vidline.jpg" /><br /><br />

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="344" width="468">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/wcE1Jjlj55c&color1=0xb1b1b1&color2=0xcfcfcf&hl=en_US&feature=player_embedded&fs=1" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/wcE1Jjlj55c&color1=0xb1b1b1&color2=0xcfcfcf&hl=en_US&feature=player_embedded&fs=1" height="344" width="468" wmode="transparent" />
</object><br /><br />

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="344" width="468">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/whxo_nYghis&color1=0xb1b1b1&color2=0xcfcfcf&hl=en_US&feature=player_embedded&fs=1" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/whxo_nYghis&color1=0xb1b1b1&color2=0xcfcfcf&hl=en_US&feature=player_embedded&fs=1" height="344" width="468" wmode="transparent" />
</object><br /><br />

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="344" width="468">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/iBrB1n9MFGo&color1=0xb1b1b1&color2=0xcfcfcf&hl=en_US&feature=player_embedded&fs=1" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/iBrB1n9MFGo&color1=0xb1b1b1&color2=0xcfcfcf&hl=en_US&feature=player_embedded&fs=1" height="344" width="468" wmode="transparent" />
</object><br /><br />





<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/friendline.jpg" /><br />





<span class="off">!-Start Block to Shift Comments To Center-!</span>
<style>
{!-Change the top px value as needed. This is distance B on the chart-!}
table.friendscomments {position:relative; left:-1%;}
table.friendscomments {width:800px !important;}
table.friendscomments td, table.friendscomments table {width:100% !important}
table.friendscomments table table td {width:auto !important;}
</style>
<span class="off">!-END Block to Shift Comments To Center-!</span>


<style>
table.friendsComments tbody tr td.text table tbody tr td span.orangetext15{
background-image: URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/commentline.jpg) ;
background-repeat: no-repeat !important;
background-color: transparent;
display: block !important;
height: 70px !important;
color: ffffff!important;
width: 820px;
position: relative;
overflow: hidden;
font-size: 1px;
text-align: right;
margin-top: -1px;
line-height: 300px !important;
_width: 820px !important;
_border-left: 1px ffffff!important;
_border-right: 1px ffffff!important;
_height: 70px !important;
_margin-bottom: -1px !important;
}
</style>




<style>
.orangetext15{display:none}
</style>

<style>embed, object {position:absolute; top:1079px; left:50%; margin-left: -47px; z-index:9; } td td td embed, td td td object { position:static; margin-left:0px; }</style>


<style>table table table { visibility:hidden; }
table table .text table { visibility:visible; }</style>

<style>
.navbar, .subnavItems {display: none!important;}
</style>

<style>

.latestBlogEntry {
position:absolute;
top:2030px;
margin-left: -405px;
left:50%;
width: 370px;
background-color: transparent;
z-index: 9;
}

table .latestBlogEntry {
width:370px!important;
}
</style>

[Mickey]

Replace this chunk:

CODE

<style>
.profileWidth {
padding-bottom:1806px !important;}
</style>


<div id="BannerUnderTopNav" style="position:absolute; z-index:2; margin-left:-346px; _margin-left:-333px; top: 0px; background-color:COLOR; background-image:URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/header1.jpg); background-repeat: no-repeat; background-position: bottom center; width:823px; height:2017px; overflow:no;">

With this:

CODE

<style>
.profileWidth {
padding-bottom:1806px !important;}
.header {position: absolute; top: 0px; left: 50%; margin-left: -415px; padding: 0px; z-index: 2;}
</style>


<div class="header"><img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/header1.jpg" alt="" /></div>

Then replace this:

CODE

body{ font-size:x-small;
background-color:cbc8af;
background-image:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/bg2.jpg);
background-attachment:scroll;
background-repeat: no-repeat;
background-position:top center;
margin-top: 0px;}

With this:

CODE

body{ font-size:x-small;
background-color:cbc8af;
background-image:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THOSE%20VICTORIOUS/bg2.jpg);
background-attachment:scroll;
background-repeat: no-repeat;
background-position:top center;
margin: 0px;
padding: 0px;}

Finally, change the widths of the header image and the background so you're working with even numbers. Right now, the width is 823px.

[shynomi]

Thanks for the help so far, I've switched out the codes and I have the header set at 826px wide so it's even. Looks fine in firefox after setting the margin left but still having the same problem in safari with the 1 px off. It's so weird, everything I used to do in Firefox generally always looked exactly the same in Safari.

Here's the revised code: Is the line coming up on your end?
http://www.myspace.com/frucatestpage

CODE

<style>
.profileWidth {
padding-bottom:2186px !important;}
.header {position: absolute; top: 0px; left: 50%; margin-left: -415px; padding: 0px; z-index: 2;}
</style>


<div class="header"><img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/header5.jpg" alt="" /></div>




<style>
.tg_left {position:absolute; margin-top:-0px; margin-left:-410px; left:50%; top:2606px; width:315px; height:700px; background-color:transparent; z-index:2;}
</style>




<div class="tg_left">

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/twitterline.jpg" /><br /><br />

<center><div style="width:176px;text-align:center"><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=3368703&type=user&id=122618489" />
<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=3368703&type=user&id=122618489" quality="high" />
</object><br /><a style="font-size: 10px; color: 3366FF; text-decoration: none" href="http://www.msplinks.com/MDFodHRwOi8vdHdpdHRlci5jb20vdW5kZWZpbmVk">FOLLOW GC!</a></div>
<br /><br />



<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/merchline.jpg" /><br /><br />

<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lmdvb2RuaWdodGNhdWxmaWVsZC50aGVtZXJjaHRlbnQuY29t"><img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/shirts2.png" /></a>


<br /><br />

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/sponsorline.jpg" /><br /><br />

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/sponsors1.png" /><br /><br />





<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/infoline.jpg" /><br /><br />





<table width="250px" border="0" cellspacing="3" cellpadding="3">


<tr>

<td>_HOMETOWN</td><td><div align="right">San Diego, CA</div></td>
</tr>


<tr>
<td>_MANAGEMENT</td>
<td><div align="right"><a href="mailto:andrew@restlessmanagement.com">Andrew Rosenbleet<br />Restless Management</a><br /></div></td>
</tr>

<tr>
<td>_BOOKING</td>
<td><div align="right"><a href="mailto:Zach@varietyart.com">Zach Mullinax<br />Variety Artists</a><br /></div></td>
</tr>


<tr>

<td>_LABEL</td><td><div align="right"><i>none</i></div></td>
</tr>



<tr>
<td>_LAYOUT</td>
<td><div align="right"><a href="mailto:frucafrucaposters@gmail.com">Fruca Fruca Design</a><br /></div></td>
</tr>



</table>


<br /><br />

<center><a href="http://www.myspace.com/restlessmanagement"><img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/Managementlogo.png" /></a><br /></center>









</div>


<style>ul li a:link, ul li a:active, ul li a:visited ul li a.open:visited, ul li a:link, ul li a:active, ul li a:visited {font: bold 10px arial !important; letter-spacing: -1px !important; text-transform: uppercase; margin-top: 19px; text-align:left;}</style>


<style>.whitetext12{visibility:hidden; display:none;}.lightbluetext8{visibility:hidden; display:none;}</style>

<style>
.friendText {display:none}
.redLink {display:none}
</style>



<style>

{THIS MAKES THE BODY TABLE TRANSPARENT}
{*NOTE* - IF YOU DO NOT WANT THE BODY TABLE TRANSPARENT, SIMPLY CHANGE TRANSPARENT TO A COLOR}


body{ font-size:x-small;
background-color:ffffff;
background-image:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/bg1.jpg);
background-attachment:scroll;
background-repeat: no-repeat;
background-position:top center;
margin: 0px;
padding: 0px;}


{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:000000;font-size:8pt;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:000000;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:1e2d4c;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:000000;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;}

</style>

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/bioline.jpg" /><br /><br />

<b>
The group was founded by guitarist/vocalist Adam Cuadra and lead guitarist Joey Meza, best friends since high school, in late 2006. They enlisted the aid of drummer Matt Clemens who wowed them with an ear-shattering drum solo, and newest member Brian Disney. <br /><br />

The band name is a reference to Holden Caulfield of the best-selling novel The Catcher in the Rye. The band is bidding adieu to Caulfield’s style of rebellious pessimism and negativity in order to welcome something more positive. <br /><br />

The group released their self-titled debut EP in early 2008. It was a showcase Alternative/Emo Rock similar to Anberlin, Armor for Sleep and Paramore, which is no surprise as the members cite them as strong influences. Like their contemporaries, their music is highly energetic and upbeat with positive, forward-thinking lyrics to match. <br /><br />

“I believe our music paints a real picture of life situations,” says Cuadra. “Our message is be yourself. Life has its up’s and down’s so focus on what you are passionate about and go for it.” <br /><br />

The band released their first full length The Masquerade in 2009, signed to Variety Artists booking agency, and went on their first National 43 city tour with Tooth and Nail recording artists Showbread. <br /><br />

2010 has already been a busy year for Goodnight Caulfield as they sign with The Mighty Restless Management and get ready to hit the road with Epitaph recording artists The Higher. The band also has set a May 4th release date for their new E.P. Notes, Hopes & Paper Boats.
<br /><br />
</b>



<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/promoline.jpg" /><br /><br />

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/bannerr.gif" /><br /><br />

<center><textarea><a href="http://www.myspace.com/goodnightcaulfield"><img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/bannerr.gif"></a></textarea></center>

<br /><br />

<img src="http://designbythekitsch.squarespace.com/storage/goodnight/banner.gif" /><br /><br />

<center><textarea><a href="http://www.myspace.com/goodnightcaulfield"><img src="http://designbythekitsch.squarespace.com/storage/goodnight/banner.gif"></a></textarea></center>

<br /><br />

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/release1.png" /><br /><br />



<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/vidline.jpg" /><br /><br />

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="385" width="468">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://www.youtube.com/v/q-1ysfdbgQI&hl=en_US&fs=1&" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/q-1ysfdbgQI&hl=en_US&fs=1&" height="385" width="468" wmode="transparent" />
</object><br /><br />



<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/friendline.jpg" /><br />










<span class="off">!-Start Block to Shift Comments To Center-!</span>
<style>
{!-Change the top px value as needed. This is distance B on the chart-!}
table.friendscomments {position:relative; left:-1%;}
table.friendscomments {width:800px !important;}
table.friendscomments td, table.friendscomments table {width:100% !important}
table.friendscomments table table td {width:auto !important;}
</style>
<span class="off">!-END Block to Shift Comments To Center-!</span>


<style>
table.friendsComments tbody tr td.text table tbody tr td span.orangetext15{
background-image: URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20GOODNIGHT%20CAULFIELD/commentline.jpg) ;
background-repeat: no-repeat !important;
background-color: transparent;
display: block !important;
height: 70px !important;
color: ffffff!important;
width: 820px;
position: relative;
overflow: hidden;
font-size: 1px;
text-align: right;
margin-top: -1px;
line-height: 300px !important;
_width: 820px !important;
_border-left: 1px ffffff!important;
_border-right: 1px ffffff!important;
_height: 70px !important;
_margin-bottom: -1px !important;
}
</style>




<style>
.orangetext15{display:none}
</style>

<style>embed, object {position:absolute; top:1310px; left:50%; margin-left: -40px; z-index:9; } td td td embed, td td td object { position:static; margin-left:0px; }</style>


<style>table table table { visibility:hidden; }
table table .text table { visibility:visible; }</style>

<style>
.navbar, .subnavItems {display: none!important;}
</style>

<style>

.latestBlogEntry {
position:absolute;
top:2420px;
margin-left: -405px;
left:50%;
width: 370px;
background-color: transparent;
z-index: 9;
}

table .latestBlogEntry {
width:370px!important;
}
</style>

[shynomi]

Well I did some searching on the internet and found that it's a common problem. I have the link here:

http://www.sohtanaka.com/web-design/1px-ba...-alignment-bug/

I found a solution that works on my computer at the moment but it's still not fixed on other resolutions or monitors as when i drag the corner of the window it comes and goes. I just added a .4 to the leftmargin: 346.4 and it works now for mine.

here's the two margins:

CODE

margin-left:-346.4px;  _margin-left:-333px;

the _margin-left is for IE.

It still comes up on my laptop's screen unfortunately. Can you check and see if it is fixed on your end with this quick fix? I really wish I knew how to fix this once and for all.

thanks mike.

[shynomi]

Yea, I made the background 1599px and it now looks a little better in the three major browsers but even with 1px less it's obvious ha. I hate being a damn perfectionist ha. I'll keep searching.

Nate

[fixtatik]

Just my two cents...but why do this:

http://i382.photobucket.com/albums/oo268/d...ULFIELD/bg1.jpg

Since you have transparent tables anyway, just leave the entire image intact, without chopping out the middle. It's a huge image as-is, so it'll look better and actually be faster if you did it altogether. Slicing an image into little pieces used to seem like it was loading faster (way back when we all had dial-up and each image loaded piece by piece). In reality, servers need to make an additional HTTP request for each image, so it takes longer to finish loading the page.

And, because the image is only one instead of few, you won't see the 1-pixel bug. Granted, it'll still be there, but less noticeable because it won't play an effect on the images.

[shynomi]

That does sounds way better!
Ok, I tried another site i had worked on with this idea.
Took out the background image and added the whole graphic (sliced) in the top header section.

If I can make this work, my problem will be solved.
My issue now is the comments and right side content (shows, bio, promo, friends) are covered. Is there something i'm missing.

Link: http://www.myspace.com/frucatestpage3

Here's the code:

CODE

<style>
.profileWidth {
padding-bottom:750px !important;}
</style>


<div id="BannerUnderTopNav" style="position:absolute; z-index:2; margin-left:-735px; _margin-left:-730px; top: 0px; background-color:COLOR; background-image: ; background-repeat: no-repeat; background-position: bottom center; width:826px; height:948px; overflow:no;}">

<table id="Table_01" width="1600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_01.jpg" width="1600" height="171" alt="" /></td>
</tr>

<tr>
<td colspan="3">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_02.jpg" width="1600" height="371" alt="" /></td>
</tr>
<tr>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnR3aXR0ZXIuY29t">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_03.jpg" width="486" height="22" border="0" alt="" /></a></td>
<td rowspan="2">

<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnlhaG9vLmNvbQ==">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_04.jpg" width="109" height="23" border="0" alt="" /></a></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_05.jpg" width="1005" height="22" alt="" /></td>
</tr>
<tr>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_06.jpg" width="486" height="1" alt="" /></td>
<td>

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_07.jpg" width="1005" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_08.jpg" width="1600" height="341" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_09.jpg" width="1600" height="704" alt="" /></td>

</tr>
<tr>
<td colspan="3">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_10.jpg" width="1600" height="1129" alt="" /></td>
</tr>
</table>





</div>



<style>
.tg_left {position:absolute; margin-top:-0px; margin-left:-410px; left:50%; top:1184px; width:315px; height:700px; background-color:transparent; z-index:2;}
</style>




<div class="tg_left">

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20NATALIE%20SMITH/bigline.png" /><br /><br />
<center>


<div style="width:176px;text-align:center"><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=3368703&type=user&id=18664543" />
<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=3368703&type=user&id=18664543" quality="high" />
</object><br /><a style="font-size: 10px; color: ffffff; text-decoration: none" href="http://www.msplinks.com/MDFodHRwOi8vdHdpdHRlci5jb20vbmF0c21pdGhtdXNpYw==">FOLLOW NATALIE!</a></div>

<br /><br />

</center>



<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SEAN%20PATRICK%20MCGRAW/infoline.png" /><br /><br />








<table width="250px" border="0" cellspacing="3" cellpadding="3">
<tr>

<td>_GENRE</td><td><div align="right">Pop</div></td>
</tr>

<tr>

<td>_URL</td><td><div align="right">www.myspace.com/nataliesmithmusic</div></td>
</tr>

<tr>

<td>_HOMETOWN</td><td><div align="right">Boston, MA</div></td>
</tr>

<tr>
<td>_{CONTACT EMAIL}</td>
<td><div align="right"><a href="mailto:naugustasmith@gmail.com">naugustasmith@gmail.com</a><br /></div></td>
</tr>




<tr>
<td>_LAYOUT</td>
<td><div align="right"><a href="mailto:frucafrucaposters@gmail.com">Fruca Fruca Design</a><br /></div></td>
</tr>


</table>









</div>


<style>ul li a:link, ul li a:active, ul li a:visited ul li a.open:visited, ul li a:link, ul li a:active, ul li a:visited {font: bold 10px arial !important; letter-spacing: -1px !important; text-transform: uppercase; margin-top: -4px; text-align:left;}</style>


<style>.whitetext12{visibility:hidden; display:none;}.lightbluetext8{visibility:hidden; display:none;}</style>

<style>
.friendText {display:none}
.redLink {display:none}
</style>



<style>

{THIS MAKES THE BODY TABLE TRANSPARENT}
{*NOTE* - IF YOU DO NOT WANT THE BODY TABLE TRANSPARENT, SIMPLY CHANGE TRANSPARENT TO A COLOR}


body{ font-size:x-small;
background-color:3e5c94;
background-image:;
background-attachment:scroll;
background-repeat: no-repeat;
background-position:top center;
margin-top: 0px;}


{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:8pt;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:e5e6a3;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;}

</style>

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SEAN%20PATRICK%20MCGRAW/bioline.png" /><br /><br />

<b>Natalie Smith is quickly gaining momentum in the singer-songwriter circuit with quirky lyrics and memorable hooks. This promising young talent creates songs that make you smile. Her debut EP, “Better In The Summertime” is an organic collection of songs encompassing mainstream and underground appeal much like some of her influences Jason Mraz, The Beatles, and Sara Bareilles.<br /><br />

Natalie has been a dedicated singer since her adolescent years, writing songs and performing since she was twelve. In 2007, she crossed the states to pursue her dreams at Berklee College of Music in Boston. As Natalie prepares to release her first EP “Better In The Summertime,” she is already receiving recognition for her talent. In 2009, she was selected to perform her original song “Never Gonna Be” at Berklee’s Performer/Songwriter Fall Showcase. She also was selected to sing background vocals for Ben Folds and the Boston Pops at Symphony Hall. Graduating this spring with a degree in Songwriting, she is gearing up for a busy summer performing and promoting songs off the record. With her clever and catchy tunes and diligent work ethic, you can be sure that "Better In The Summertime" is merely a tasty preview of the music she has in store. <br /> <br /></b>

<center><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0dW5lcy5jb20="><img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20NATALIE%20SMITH/cdcover.png" /><br /><br /></center>



<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20SEAN%20PATRICK%20MCGRAW/friendline.png" /><br />





<span class="off">!-Start Block to Shift Comments To Center-!</span>
<style>
{!-Change the top px value as needed. This is distance B on the chart-!}
table.friendscomments {position:relative; left:-1%;}
table.friendscomments {width:800px !important;}
table.friendscomments td, table.friendscomments table {width:100% !important}
table.friendscomments table table td {width:auto !important;}
</style>
<span class="off">!-END Block to Shift Comments To Center-!</span>


<style>
table.friendsComments tbody tr td.text table tbody tr td span.orangetext15{
background-image: URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20NATALIE%20SMITH/comment.png) ;
background-repeat: no-repeat !important;
background-color: transparent;
display: block !important;
height: 70px !important;
color: ffffff!important;
width: 800px;
position: relative;
overflow: hidden;
font-size: 1px;
text-align: right;
margin-top: -1px;
line-height: 300px !important;
_width: 800px !important;
_border-left: 1px ffffff!important;
_border-right: 1px ffffff!important;
_height: 70px !important;
_margin-bottom: -1px !important;
}
</style>




<style>
.orangetext15{display:none}
</style>

<style>embed, object {position:absolute; top:562px; left:50%; margin-left: -416px; z-index:9; } td td td embed, td td td object { position:static; margin-left:0px; }</style>


<style>table table table { visibility:hidden; }
table table .text table { visibility:visible; }</style>

<style>
.navbar, .subnavItems {display: none!important;}
</style>

<style>

.latestBlogEntry {
position:absolute;
top:974px;
margin-left: -410px;
left:50%;
width: 335px;
background-color: transparent;
z-index: 9;
}

table .latestBlogEntry {
width:335px!important;
}
</style>

[shynomi]

Yea i figured that, where would I put the main graphics code then? Once I know this I should be good to go :) I know to put it in the background's section just not where to put it.

Here's the code for that section:

CODE

<style>

{THIS MAKES THE BODY TABLE TRANSPARENT}
{*NOTE* - IF YOU DO NOT WANT THE BODY TABLE TRANSPARENT, SIMPLY CHANGE TRANSPARENT TO A COLOR}



body{ font-size:x-small;
background-color:3e5c94;
background-image:;
background-attachment:scroll;
background-repeat: no-repeat;
background-position:top center;
margin-top: 0px;}




{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:8pt;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:e5e6a3;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;}

</style>

This is the graphic's code.

CODE

<table id="Table_01" width="1600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_01.jpg" width="1600" height="171" alt="" /></td>
</tr>

<tr>
<td colspan="3">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_02.jpg" width="1600" height="371" alt="" /></td>
</tr>
<tr>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnR3aXR0ZXIuY29t">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_03.jpg" width="486" height="22" border="0" alt="" /></a></td>
<td rowspan="2">

<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnlhaG9vLmNvbQ==">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_04.jpg" width="109" height="23" border="0" alt="" /></a></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_05.jpg" width="1005" height="22" alt="" /></td>
</tr>
<tr>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_06.jpg" width="486" height="1" alt="" /></td>
<td>

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_07.jpg" width="1005" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_08.jpg" width="1600" height="341" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_09.jpg" width="1600" height="704" alt="" /></td>

</tr>
<tr>
<td colspan="3">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/newbgandheader_10.jpg" width="1600" height="1129" alt="" /></td>
</tr>
</table>

[shynomi]

Man, this sounds like a simple idea by making it one image, using that as the background and I can get it to come up as a background but it's not on the right z-index i'm thinking because I can see the shows and bio and stuff but am unable to edit or click on them.

Is there something i should add to the background section code?

CODE

body{ font-size:x-small;
background-color:3e5c94;
background-image:URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20NATALIE%20SMITH/header.jpg);
background-attachment:scroll;
background-repeat: no-repeat;
background-position:top center;
margin-top: 0px;
}

Plus, how would I go about making the links work again in the top part of the image? Just add it in where I used to under the header code in the <table> tags?

Sorry for the confusion on my end, you guys have been a huge help!
Nate

[shynomi]

Yea that worked, for some reason I had taken that out earlier and it didn't do that but oh well good deal for that part. I'm not familiar with blank link gifs, is there anyway i can still slice up the graphic in PS and then link them there? I'm also needing to get rid of that ugly clear strip up top in the advertisement section.

[fixtatik]

You shouldn't need anything transparent. Setting a link to block display and giving it a fixed width and height will do just fine. 1x1 pixel or not, it's still an additional request to a server. In anything on the web, always use text or code over images if you have the option.

Basically your entire layout consists of three parts: the background image (part of the style sheet, but we'll just consider it an extra part, since you had to make it), the style sheet, and the HTML. Keep ALL of your CSS together; don't use multiple <style> tags, and don't use inline styling (<div style=" ">). Browsers themselves also contribute to load time. If it has to keep switching between outputting HTML and styling it, it takes longer to parse. If you do everything correctly, you shouldn't need hacks to get cross-browser compatibility.

If we're being honest, I'd say start over and try it like this:

1. Begin with your style sheet. Put anything and everything you plan on using to make things pretty between your style tags.
   
2. Add the background, using shorthand:
   
   CODE
   body { background:rgb(255,255,255) url(IMAGE URL) top center no-repeat; }
   
   Notice the "rgb". You can use words (e.g., white, blue, black, etc.), or values of red, green and blue ("rgb"). You can also use standard hexadecimal colors (#000000), but only on profile 2.0. Profile 1.0 filters out the # symbol.
   
   Looking at those codes you put in earlier posts, you have a lot of unnecessary attributes with no values. If you don't plan on using something, don't use it. There's no point adding extra things if they won't serve a purpose.
   
3. Keep in mind that anything can use a class. You don't need to put images between <div> tags if all you're doing is moving it somewhere. For example, you can use something like this:
   
   CSS
   CODE
   .move { position:absolute; top:100px; left:100px; }
   
   
   HTML
   CODE
   <img class="move" src="URL" />
   
   Again, useless code is useless.
   
4. For that pesky navigation, make use of single classes and group everything together. Life is just easier when things are simplified. If you need different widths per link, just give each its own class. (I'd say use IDs, but since it's MySpace, stick with classes.) In the end, all you really need to position is the main container for the navigation, instead of each link.
   
   CSS
   CODE
   .navigation { left:50%; margin:500px 0 0 -400px; position:absolute; top:0; width:800px; }
   .navigation a { display:block; float:left; height:30px; }
   ._1 { width:100px; }
   ._2 { width:80px; }
   ._3 { width:90px; }
   
   
   HTML
   CODE
   <div class="navigation">
     <a class="_1" href="URL"></a>
     <a class="_2" href="URL"></a>
     <a class="_3" href="URL"></a>
   </div>
   
   This is just an example, so it'll require tweaking to get it like you need. Take a look at my rollover tutorial to get a better idea. They don't have to be rollovers; you can use it in any circumstance.

If you're making something that's going to be image heavy, always try to combine all of the images. Usually I'll have some type of repeating background, then all of the other images are kept together, like this:

click to enlarge

Think of those old-school 8-bit video games. All the graphics you see in Mario are actually a single image.

[shynomi]

Awesome, Let me look this over a bit.

[fixtatik]

Also, I should mention you can position children within their parent. As long as the parent (i.e., <div class="navigation">) has a fixed (not in IE6 or earlier, yay!), relative or absolute position, assigning an absolute position to the children (i.e., <a>) will start the top left corner of the children from the top left corner of the parent (not from the top left corner of the body). It makes positioning elements inside the navigation div a hell of a lot easier, since you won't need to use that annoying left:50% trick. Instead, you'll only need to know exactly how far from the top left of .navigation you want to move each link.

[shynomi]

Yea photobucket pro is a lot better than they used to be.
Well I'm way under experienced it seems for trying to do this, i'm basically starting over in essence. I had gotten used to my old code and that was a year's working effort ha. This way seems way smarter so just in the process of trying to figure out how this works. Is there any tutorials recommended around this idea?

[shynomi]

agreed.
you can close this :)

[Mickey]

Topic closed & moved.