Layout Issues!, Everything misaligned... Options

[MLi928]

Hello! I have a Sponsored+ Account and have been working with an S1 layout. I read the disclaimer for the S1 accounts and am still having trouble with my layout. It is completely misaligned, no matter how many times I toy with the numbers (when I finally think it looks right, the layout misaligns when I exit Internet Explorer and reload the page from scratch).

The top of the page doesn't line up with the rest, and I can't seem to configure the text to fit inside the box. I know this post is a doozy, so I appreciate any help you can give me!

http://du-futur-siecle.livejournal.com

Here is the code I am using:

GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
background-color: #B1DC77;
background-image:
url(http://images.cbimg4.com/livejournal/15/3702a.jpg);
background-repeat: repeat-y;
background-attachment: floating;
background-position: 50%;
margin-top: 480px;
color: #236B8E;
}

table, tr, td, .shadowed {
background: transparent;
}

table {
width: 356px;
margin-left: 277px;
}
table table {
width: 100%;
margin:0;
}
table table table {
width: auto;
}

html body .shadowed img.x{
z-index: -1;
}
table, .shadowed div{
z-index: 80;
}
html>body table{
position: fixed;
}

table table table table .meta {visibility:hidden;position:absolute;top:1px}
table table table table table .meta {visibility:visible;position:absolute;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px
}

.x{
position:absolute;
top:0px;
width: 650px;
left:50%;
margin-left: -325px !important;
margin-left: -324px;}

#sidebar{
position:absolute;
top: 528px;
left: 50%;
margin-left: -310px;
width: 185px;
height: 100%;
visibility: visible;
z-index:2;
font-size:11px;
font-family: Verdana;
font-color: #236B8E;
text-align: justify;
}
#sidebar img{
display:inline;
}
#sidebar a{
text-decoration: none;
font-weight: none;
color:#FFF68F;
}
#sidebar a:hover{
text-decoration: none;
font-weight: none;
color: #33A1C9;
}

p .index {
color: #50A6C2;
}
p table table td.caption {
font-size:11.5px;
font-weight: bold;
color: #05B8CC;
font-family: Verdana;
}
.comments {
font-size: 11px;
font-family: Verdana;
}
BODY, TD {font-family:verdana;color:#236B8E;font-size:11px;}

a:link, a:visited, a:active {
text-decoration: none;
font-weight: none;
color:#33A1C9;
}
a:hover{
text-decoration: none;
font-weight: none;
color: #FFF68F;
}
.entrybox td{
text-align: justify;
font-family: verdana;
}
.entrybox td.index {
text-align: right;
}
-->
</style>
<=GLOBAL_HEAD

FRIENDS_WEBSITE<=

<div id="sidebar">
<p><b>Du Futur Siecle</b>
<p><a href="http://www.livejournal.com/users/du_futur_siecle">Home</a>
<br /><a href="http://www.livejournal.com/login.bml">Sign in</a>
<br /><a href="http://www.livejournal.com/users/du_futur_siecle/info">Info</a>
<br /><a href="http://www.livejournal.com/users/du_futur_siecle/friends">Friends</a>
<br /><a href="http://www.livejournal.com/users/du_futur_siecle/calendar">Calendar</a>
<br /><a href="http://www.livejournal.com/modify.bml?authas=du_futur_siecle">Modify</a>
<br /><a href="http://www.livejournal.com/update.bml">Update</a>
<br /><a href="http://www.livejournal.com/logout.bml">Log out</a>

<p><b>Links</b>
<p>
<a href="http://www.myspace.com/">MySpace</a>
<br /><a href="http://www.rickross.com">Cult Awareness</a>
<br /><a href="http://www.createblog.com">createblog</a>

<p><b>Moi:</b>
<p>
My name is Meredith. Welcome to my LiveJournal! Pull up a chair and listen to my inane ramblings.
</div>


<IMG class="x" SRC= "http://images.cbimg4.com/livejournal/15/3702.jpg">

<style type="text/css">
<!--
table table table table .meta

{visibility:hidden;position:absolute;top:1px}
table table table table table .meta

{visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px;
</style>
<=FRIENDS_WEBSITE

LASTN_TALK_READLINK=><a href="%%urlread%%"><b>%%messagecount%% Named Your God%%mc-plural-s%%</b></a>|

CALENDAR_WEBSITE<=

<div id="sidebar">
<p><b>Du Futur Siecle</b>
<p><a href="http://www.livejournal.com/users/du_futur_siecle">Home</a>
<br /><a href="http://www.livejournal.com/login.bml">Sign in</a>
<br /><a href="http://www.livejournal.com/users/du_futur_siecle/info">Info</a>
<br /><a href="http://www.livejournal.com/users/du_futur_siecle/friends">Friends</a>
<br /><a href="http://www.livejournal.com/users/du_futur_siecle/calendar">Calendar</a>
<br /><a href="http://www.livejournal.com/modify.bml?authas=du_futur_siecle">Modify</a>
<br /><a href="http://www.livejournal.com/update.bml">Update</a>
<br /><a href="http://www.livejournal.com/logout.bml">Log out</a>

<p><b>Links</b>
<p>
<a href="http://www.myspace.com">MySpace</a>
<br /><a href="http://www.rickross.com">Cult Awareness</a>
<br /><a href="http://www.createblog.com">createblog</a>

<p><b>Moi:</b>
<p>
Hi, my name is Meredith. Welcome to my LiveJournal! Pull up a chair and listen to the crazed ramblings of a madwoman.
</div>


<IMG class="x" SRC= "http://images.cbimg4.com/livejournal/15/3702.jpg">

<style type="text/css">
<!--
table table table table .meta

{visibility:hidden;position:absolute;top:1px}
table table table table table .meta

{visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px;
</style>
<=CALENDAR_WEBSITE

DAY_WEBSITE<=

<div id="sidebar">
<p><b>Du Futur Siecle</b>
<p><a href="http://www.livejournal.com/users/du_futur_siecle">Home</a>
<br /><a href="http://www.livejournal.com/login.bml">Sign in</a>
<br /><a href="http://www.livejournal.com/users/du_futur_siecle/info">Info</a>
<br /><a href="http://www.livejournal.com/users/du_futur_siecle/friends">Friends</a>
<br /><a href="http://www.livejournal.com/users/du_futur_siecle/calendar">Calendar</a>
<br /><a href="http://www.livejournal.com/modify.bml?authas=du_futur_siecle">Modify</a>
<br /><a href="http://www.livejournal.com/update.bml">Update</a>
<br /><a href="http://www.livejournal.com/logout.bml">Log out</a>

<p><b>Links</b>
<p>
<a href="http://www.myspace.com">MySpace</a>
<br /><a href="http://www.rickross.com">Cult Awareness</a>
<br /><a href="http://www.createblog.com">createblog</a>

<p><b>Moi:</b>
<p>
Hi, my name is Meredith. Welcome to my LiveJournal! Pull up a chair and listen to the crazed ramblings of a madwoman.
</div>


<IMG class="x" SRC= "http://images.cbimg4.com/livejournal/15/3702.jpg">

<style type="text/css">
<!--
table table table table .meta

{visibility:hidden;position:absolute;top:1px}
table table table table table .meta

{visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px;
</style>
<=DAY_WEBSITE

LASTN_WEBSITE<=

<div id="sidebar">
<p><b>Du Futur Siecle</b>
<p><a href="http://www.livejournal.com/users/du_futur_siecle">Home</a>
<br /><a href="http://www.livejournal.com/login.bml">Sign in</a>
<br /><a href="http://www.livejournal.com/users/du_futur_siecle/info">Info</a>
<br /><a href="http://www.livejournal.com/users/du_futur_siecle/friends">Friends</a>
<br /><a href="http://www.livejournal.com/users/du_futur_siecle/calendar">Calendar</a>
<br /><a href="http://www.livejournal.com/modify.bml?authas=du_futur_siecle">Modify</a>
<br /><a href="http://www.livejournal.com/update.bml">Update</a>
<br /><a href="http://www.livejournal.com/logout.bml">Log out</a>

<p><b>Links</b>
<p>
<a href="http://www.myspace.com">MySpace</a>
<br /><a href="http://www.rickross.com">Cult Awareness</a>
<br /><a href="http://www.createblog.com">createblog</a>

<p><b>Moi:</b>
<p>
My name is Meredith. Welcome to my LiveJournal! Pull up a chair and listen to the crazed ramblings of a madwoman.
</div>


<IMG class="x" SRC= "http://images.cbimg4.com/livejournal/15/3702.jpg">

<style type="text/css">
<!--
table table table table .meta

{visibility:hidden;position:absolute;top:1px}
table table table table table .meta

{visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px;
</style>
<=LASTN_WEBSITE

LASTN_TALK_LINKS<=
<tr>
<td align="right" colspan="2" width="100%" bgcolor="%%color:weak_back%%" class="comments">
%%readlink%%<a href="%%urlpost%%">Bleed the Freak</a>
</td>
</tr>
<=LASTN_TALK_LINKS

Thanks for helping me to fix this!

[*Libertie*]

Well, this will give you a start.. http://www.createblog.com/forums/index.php?showtopic=134015

There is still an alignment problem, which is okay because sponsored+ is still fairly new to me; learning is good. :)

Best bet, in my opinion: Go back to the original code for now and add in the part from the pinned thread. Then you can mess with the positioning and you won't be working yourself in circles, because without that code it's nearly impossible to get anything right. Let me know if you get it, or if not I can help some more.

[MLi928]

I fixed the table codes as specified in the Sponsored + post. This fixed the problem when the window is default size; however, if I maximize it, the alignment shifts.

http://du-futur-siecle.livejournal.com/

When the window is maximized, you can see that the top section shifts to the left. Otherwise, your advice was spot-on and fixed my text problems. :)

Thank you so much for your help. I really appreciate it!