Almost there ... but only almost., Trouble positioning tables on MySpace website. Options

[MrPutty]

Hello everyone!

For the last days I've been wrestling with CSS trying to get the Layout to work properly. There are two open matters I just can't get solved.

Link to my MySpace

The tasks are simple per se - but I just cant figure out how it's done on MySpace:

1: I'd like the tables to align on the lefthand side with the header, while keeping the alignment on the right side. From what I understand, a clear.gif is spanned between the tables. I have no idea where I can adjust the alignment.

2: The tables dont have the same height below the header. (The right one starts lower). There are two <br> above the blog table, and just one above the name-table. Although I can change the line height of the <br>, I cant get both sides to line up properly of course. (1 left / 2 right)

Having spent complete nights till 4:30 am on these, I'm all out of luck. Your help is greatly appreciated.


Monokoi

[MrPutty]

Maybe I should have include the css used. Sorry!

CODE

<div class="kopf"><span></span></div>

<style type="text/css">

NOTE{hide}
span form { display:none; }


NOTE {reduce}
body {background:000000 url('http://www.anro-media.com/images/monokoi_music.jpg') no-repeat fixed center center; font-size: 1px; line-height: 1px;font-family: Helvetica, Verdana, Arial, sans-serif; }

NOTE {apply}

p {margin: 0px 0px 1em 0px; font-family: Helvetica, Verdana, Arial, sans-serif, !important}

NOTE {set}

a, a:link, a:visited {color:808080; text-decoration: none;}

a:hover {color:2F4F4F; text-decoration: none}

NOTE {brought}

img {border: none}

NOTE {set}

br {line-height: 20px;}

NOTE {apply}

form {border-width:0px;background-color:none;}

input {background-color:transparent !important}

NOTE {shifts}

body>div {margin-left: 10px;}

NOTE {zeros}

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 26px 15px 26px}

NOTE {these}

table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: url('none');}

table table table table td {padding:0px;margin:0px;}

table table table {margin:0px; background-color:transparent; background-image: url('http://www.anro-media.com/images/monokoi_trans.png'); width: 100% !important; border-width: 3px; border-style: double; border-color: ffffff;}

NOTE {this}

.kopf {width: 850px; height: 100px; position: absolute; margin-left: -425px; left: 50%; top: 158px; background-image: url('http://www.anro-media.com/images/monokoi_bar.png');}

NOTE {pushes}

body table {margin-top:104px;}

body td table, body div table {margin-top: 0;}

NOTE {sets}

font {color:342815;font-size:10px}

a font:hover {color:ff0000}

a.navbar:link, a.navbar:visited {color:808080}

a.navbar:hover {color:808080}

table tr td table tr td font {display: inline;}

table tr td table a.navbar {font-size: 10px;}

NOTE {sets}

.text {color:000000;font-size:11px}

a.text:link, a.text:visited {color:342815}

a.text:hover {color:000000}

NOTE {how}

.nametext {border-left:0px solid ffffff; border-right:0px solid ffffff; border-top:0px solid ffffff; border-bottom:3px solid ffffff; background-image: url('http://www.anro-media.com/images/monokoi_name.gif'); background-repeat: no-repeat; overflow: hidden; height: 40px; width: 270px; font-size: 1px; text-align: left; color: d9d9d9; display: block; margin-left:0px; margin-right:0px; margin-top:14px; margin-bottom:8px;
-left:0px; padding-right:0px; padding-top:0px; padding-bottom:3px; background-position-y:center;}

NOTE {your}

.contactTable {width: 328px !important;}

.contactTable td {padding: 0px; margin: 0px; text-align: center;}

.contactTable span.whitetext12 {position: relative; left: 10px;}

.contactTable td table {background-color: transparent; background-image: url('http://www.anro-media.com/images/monokoi_contact.gif'); background-position:  center 50%; background-repeat: no-repeat}

.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 30px; width: 136px; background-color: transparent;}

.contactTable a img, .contactTable img {border: 0px; display: none; visibility: hidden;}

NOTE {stretches}

table tr td table tr td table tr td div strong {display: block; width: 270px;}

NOTE {these}

.whitetext12 {color:000000; font-size: 18px; margin: 0px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; display: block; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: normal; border-width: 0px 0px 3px 0px; border-style: double; border-color: ffffff; width: 270px}

NOTE {this}

.blacktext12 {color:000000;font-size:18px; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: normal; display: block; margin-top: 14px}

NOTE {why}

.blacktext12:before {content: "OMFG!";}

NOTE {"Latest Blog Entry" and}

.btext {color:000000; font-size: 18px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; display: block; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: normal; text-align: center; border-width: 0px 0px 3px 0px; border-style: double; border-color: ffffff}

NOTE {all}

.orangetext15 {color:000000; font-size: 18px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; display: block; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: normal; border-width: 0px 0px 3px 0px; border-style: double; border-color: ffffff; width: 372px}

NOTE {bold}

.lightbluetext8 {color:660000}

NOTE {span}

.redtext, .redbtext {color:000000; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold}

.redbtext:after {content: "billion";}

NOTE {text}

a.redlink:link {color:437538; display: block; text-align: center; border-width: 3px 0px 0px 0px; border-style: double; border-color: ffffff; padding-top: 3px;}

a.redlink:visited {color:437538}

a.redlink:hover {color:76996e}

NOTE {removes}

u {text-decoration: none; font-size: 10px;}

</style>

<comment>
<style type="text/css">

NOTE {here}

.whitetext12{width: auto}

.contactTable {
    width: auto !important;
}

.contactTable span.whitetext12 {
    left: 0;
}

.orangetext15 {width: auto;}

table table table td{padding: 0;}

table table table {
padding: 0 14px 14px 14px;
border-color: ffffff;
}

table table table {max-width: 423px;}

.nametext {
height: 35px;
width: auto;
}

table tr td table tr td table tr td div strong {
    display: inline;
    width: auto;
}


</style>
</comment>

<p style="font-size: 10px;">monokoi - under construction!</p>

I still havn't solved the matter... any pointers, please?

[MrPutty]

sweet! Thanx abraxus. After adding your code, it took some further changes to reposition the div container for the banner on top.

It worked to push up the table, but no there's no vertical spacing between all tabes on the right side, as well as the comment box . Any ideas?

MySpace Link

[MrPutty]

Thank you, Thomas! Removing the margin css comment in both lines solved the problem.

Now the only worry I'm left with is how to align the tables with the header on the lefthand side?

Current MySpace site

I'll also have to find out, why the commentary table is still stuck to the table above. The alignment issue is much more omportant, though.

Updated coding:

CODE

<div class="kopf"><span></span></div>

<style type="text/css">

NOTE{hide}
span form { display:none; }


NOTE {reduce}
body {background:000000 url('http://www.anro-media.com/images/monokoi_music.jpg') no-repeat fixed center center; font-size: 1px; line-height: 1px;font-family: Helvetica, Verdana, Arial, sans-serif; }

NOTE {apply}

p {margin: 0px 0px 1em 0px; font-family: Helvetica, Verdana, Arial, sans-serif, !important}

NOTE {set}

a, a:link, a:visited {color:808080; text-decoration: none;}

a:hover {color:2F4F4F; text-decoration: none}

NOTE {brought}

img {border: none}

NOTE {set}

br {line-height: 20px;}

NOTE {apply}

form {border-width:0px;background-color:none;}

input {background-color:transparent !important}

NOTE {shifts}

body>div {margin-left: 10px;}

NOTE {zeros}

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 26px 15px 26px}

NOTE {these}

table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: url('none');}

table table table table td {padding:0px;margin:0px;}

table table table {margin:0px; background-color:transparent; background-image: url('http://www.anro-media.com/images/monokoi_trans.png'); width: 100% !important; border-width: 3px; border-style: double; border-color: ffffff;}

NOTE {this}

.kopf {width: 850px; height: 100px; position: absolute; margin-left: -609px; left: 50%; top: -264px; background-image: url('http://www.anro-media.com/images/monokoi_bar.png');}

NOTE {pushes}

body table {margin-top:104px;}

body td table, body div table {margin-top: 0;}

NOTE{push up table}
td.text table {position:relative; top:-20px;}
td.text table table {position:static;}

NOTE {sets}

font {color:342815;font-size:10px}

a font:hover {color:ff0000}

a.navbar:link, a.navbar:visited {color:808080}

a.navbar:hover {color:808080}

table tr td table tr td font {display: inline;}

table tr td table a.navbar {font-size: 10px;}

NOTE {sets}

.text {color:000000;font-size:11px}

a.text:link, a.text:visited {color:342815}

a.text:hover {color:000000}

NOTE {how}

.nametext {border-left:0px solid ffffff; border-right:0px solid ffffff; border-top:0px solid ffffff; border-bottom:3px solid ffffff; background-image: url('http://www.anro-media.com/images/monokoi_name.gif'); background-repeat: no-repeat; overflow: hidden; height: 40px; width: 270px; font-size: 1px; text-align: left; color: d9d9d9; display: block; margin-left:0px; margin-right:0px; margin-top:14px; margin-bottom:8px;
-left:0px; padding-right:0px; padding-top:0px; padding-bottom:3px; background-position-y:center;}

NOTE {your}

.contactTable {width: 328px !important;}

.contactTable td {padding: 0px; margin: 0px; text-align: center;}

.contactTable span.whitetext12 {position: relative; left: 10px;}

.contactTable td table {background-color: transparent; background-image: url('http://www.anro-media.com/images/monokoi_contact.gif'); background-position:  center 50%; background-repeat: no-repeat}

.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 30px; width: 136px; background-color: transparent;}

.contactTable a img, .contactTable img {border: 0px; display: none; visibility: hidden;}

NOTE {stretches}

table tr td table tr td table tr td div strong {display: block; width: 270px;}

NOTE {these}

.whitetext12 {color:000000; font-size: 18px; margin: 0px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; display: block; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: normal; border-width: 0px 0px 3px 0px; border-style: double; border-color: ffffff; width: 270px}

NOTE {this}

.blacktext12 {color:000000;font-size:18px; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: normal; display: block; margin-top: 14px}

NOTE {why}

.blacktext12:before {content: "OMFG!";}

NOTE {"Latest Blog Entry" and}

.btext {color:000000; font-size: 18px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; display: block; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: normal; text-align: center; border-width: 0px 0px 3px 0px; border-style: double; border-color: ffffff}

NOTE {all}

.orangetext15 {color:000000; font-size: 18px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; display: block; font-family: Helvetica, Verdana, Arial, sans-serif; font-weight: normal; border-width: 0px 0px 3px 0px; border-style: double; border-color: ffffff; width: 372px}

NOTE {bold}

.lightbluetext8 {color:660000}

NOTE {span}

.redtext, .redbtext {color:000000; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold}

.redbtext:after {content: "billion";}

NOTE {text}

a.redlink:link {color:437538; display: block; text-align: center; border-width: 3px 0px 0px 0px; border-style: double; border-color: ffffff; padding-top: 3px;}

a.redlink:visited {color:437538}

a.redlink:hover {color:76996e}

NOTE {removes}

u {text-decoration: none; font-size: 10px;}

</style>

<comment>
<style type="text/css">

NOTE {here}

.whitetext12{width: auto}

.contactTable {
    width: auto !important;
}

.contactTable span.whitetext12 {
    left: 0;
}

.orangetext15 {width: auto;}

table table table td{padding: 0;}

table table table {
padding: 0 14px 14px 14px;
border-color: ffffff;
}

table table table {max-width: 423px;}

.nametext {
height: 35px;
width: auto;
}

table tr td table tr td table tr td div strong {
    display: inline;
    width: auto;
}
</style>
</comment>

<p style="font-size: 10px;">monokoi - under construction!</p>