div layouts messed up depending on the monitor res Options

[alias5731]

I've done 2 layouts. they work fine on my screen on FF, IE etc, and other people told me they looked fine. then someone else tells me it looks all wrong, tables overlapping each other etc.

I checked on this website ( http://www.anybrowser.com/ScreenSizeTest.html ) how it turned out for each res and it's a catastrophe... My res is 1280x800

What's wrong with my codes? how can I fix that so everybody sees a correct layout?

Here's one of the layout and its codes: http://www.myspace.com/manumusicpage


In HEADLINE:

</table></table><p><table class=H><td><table><td>

In BIO:

<style>
.contactTable *, .latestBlogEntry *, span form, td div, .blurbs .orangetext15, .lightbluetext8 .nametext, .myComments div font, .myComments div a {display:none;}
td.text div, object, div table div {visibility:visible; display:block}
table, tr, td, td td div {visibility:visible; border:0px; background-color:transparent;}

---
table.H, .nametext, font strong{display:none;}
table table table table td.text img {display:none;}
table table p table table td.text img, table table td.text table table td.text img {display:block;}

table, td {height:auto !important; }
table table br {display:none}
table table td.text br, table table p td br {display:inline; line-height:13px}
p {margin-top:-13px;}

-----
td td.text object {
position:absolute;
top:200px;
left:50%;
margin-left:-400px;
}

.note {keep any third party objects in static position}
div object {position:static; margin:0px!important;}

.myComments {
width:700px;
overflow:auto;
background-color:transparent;
margin-bottom:100px;
position:absolute!important;
top:1550px; left:50%;
margin-left:-200px;
color: FFFFFF; font-size: 11px; font-family: comic sans MS;}

.mycomments {hide BandName’s in Friend Space}
.myComments .friendspace td.text td .orangetext15 {display:none;}

.mycomments {hide BandName’s has XXX friends in Friend Space}
.myComments .friendspace td.text td .btext {display:yes;}

.mycomments {hide friend’s display name in friend section}
.myComments .friendspace table table table td a {font-size:0px!important;}

.mycomments {resize friends default image in friends section;}

.mycomments {hides view all friends link}
.myComments .friendspace .redlink {display:yes;}

.mycomments {add background color/images above friends space}
.myComments .friendspace table table table td div {display:none;}
.myComments .friendspace div {
height:100px;
background-color:transparent;
background-image:url(url to image);
background-attachment:fixed;
background-position:center top;
background-repeat:repeat;
}

.mycomments {add background in friends section;}
.myComments .friendspace td.text {background-color:transparent!important;}
.myComments .friendspace table table {background-color:transparent!important;}


table table td.text table td.text tbody table tbody td table td {display: yes;}
td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:yes;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
td.text td.text table td {font-size:0pt;}td.text td.text {height:0;}td.text td.text table b, td.text td.text table table td {font-size:8pt;}



div.myDiv {
background-color:transparent; width:910px; height:1454px; position:absolute; top:220px; left:150px; background-repeat:repeat;
}


div.about {
position:absolute;
height:300px;
width:186px;
left:57%;
top:885px;
padding:2px;
font-family:comic sans MS;
font-size:11px;
line-height:12px;
color:000000;
letter-spacing:0px;
text-align:left;
overflow:auto;
z-index:1;
}


div.updates {
position:absolute;
height:450px;
width:300px;
left:25%;
top:1325px;
padding:2px;
font-family:comic sans MS;
font-size:11px;
line-height:12px;
color:000000;
letter-spacing:0px;
text-align:left;
overflow:auto;
z-index:1;
}



div.calendar {
position:absolute;
height:300px;
width:186px;
left:58%;
top:1325px;
padding:2px;
font-family:comic sans MS;
font-size:11px;
line-height:12px;
color:000000;
letter-spacing:0px;
text-align:left;
overflow:auto;
z-index:1;
}

.note {body; is where you can set your body background looks like}
body {
background-color:000000;
background-image:url(url to image);
background-attachment:fixed;
background-position:center-top;
background-repeat:repeat;
}


td td.text object {
position:absolute;
top:850px;
left:50%;
margin-left:-350px;
background-color: transparent;
}

table table td.text object,
table table td.text embed {width:350px; height:300px;}

.note {keep any third party objects in static position}
div object {position:static; margin:0px!important; width:auto; height:auto}


.a {hide top search bar}
div div select, div div form {display:none !important;}


.message {display:block;width:76px;height:24px; background-color:transparent; background-image:url("http://i29.tinypic.com/2mr5wde.png"); background-repeat:no-repeat; position:absolute; top:381px; left:65%;}

.add {display:block;width:34px;height:20px; background-color:transparent; background-image:url("http://i25.tinypic.com/34s2is2.png"); background-repeat:no-repeat; position:absolute; top:405px; left:67%;}

.pictures {display:block;width:77px;height:30px; background-color:transparent; background-image:url("http://i28.tinypic.com/2hyxlzc.png"); background-repeat:no-repeat; position:absolute; top:433px; left:65%;}

.flist {display:block;width:44px;height:27px; background-color:transparent; background-image:url("http://i26.tinypic.com/6pxaas.png"); background-repeat:no-repeat; position:absolute; top:462px; left:67%;}

</style>

<div class="myDiv"><img src="http://i30.tinypic.com/34qpbfr.jpg"/></img></img></div>


<div class="about"><b>I am Manu, 21, french, rocker. </b><br><br>You will find on this website a few of my personal compositions.<BR>
I have always been passionate about music, but I have started only a couple of years ago playing guitar & composing. This is just the beginning!<BR><BR>

My music is influenced by all sorts of artists, from country music to metal. I do not pretend this sounds like any of my favorites; I just deal with what I have and I hope you will enjoy it! <BR><BR>

I am actually attenting a business school but I hope to produce nice things again in a close future. Check the updates!
</div>

<div class="updates"><b>● 04/02/2008:</b> Going to record songs in studio in a little while so I will finally be able to upload them.
4 songs are written so far.<br><br>


<b>● 01/31/2008:</b> Lorem ipsum dolor sit amet, consectetuer adipisci elit. Distinguique non non quaeque epicuri alii referri istam, ipsa tamen scribimus, gaudere.. Et improbe vel et fabulis signiferumque, molestiae ...
</div>


<div class="calendar"><b>● 04/03/2008:</b> BDA voters night. Will perform at the Byron Bay 33 000 Bordeaux FR.<br><br>

<b>● 14/07/2008:</b> Performance during the Gigantour.</div>




<a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD0zNjQyOTAwNzE="class="add"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWFpbC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1tYWlsLm1lc3NhZ2UmZnJpZW5kSUQ9MzY0MjkwMDcx"class="message"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0zNjQyOTAwNzE="class="pictures"></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdmcmllbmRzMiZmcmllbmRJRD0zNjQyOTAwNzE="class="flist"></a>


</td></tr></table> </td></tr></table> <table><tr><td> <div class="myComments"> <table><tr><td> <table><tr><td> <table><tr><td> <table style="display:none"><tr><td> <table><tr><td>

</table></tr></td></style></span>

ps: the comments aren't customized so it's normal it looks wrong.

[MissHygienic]

Try this:

CODE

td td.text object, table table td.text object,
table table td.text embed, {
position:absolute;
top: 150px;
margin-left:-350px;
background-color: transparent;
width:350px;
height:300px;
}

Remove these:

CODE

td td.text object {
position:absolute;
top:200px;
left:50%;
margin-left:-400px;
}

And remove object from this:

CODE

td.text div, object, div table div {visibility:visible; display:block}