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.

[Relentless]

I checked the layout. It seems like it's aligned correctly. I have a 1280x1024 resolution.

Try adding margins.
On all your div positions, put in margin's. Some of the positioning doesn't have margin's. So add the margin into it.

Ex.
margin-top: px;
margin-left: px;

[alias5731]

do I replace my "top:1200px; left=58%" by the margins? or do I leave the top and left, and add margins?
what's the difference between single top/left and margins? I've tried and they change the positioning, but after checking on a 800x600 res the div is still moving around the page... doesn't stay where I had set it to on my res, if you see what I mean.

can you edit one of my div for example please? thanks a lot in advance

[alias5731]

Fixed it for the div tables. For those interested in the solution I made my main image a "master" div with relative position, and all the other divs inside with absolute position.

Just one thing left: the music player. I don't have a div for it, so I can't make it stay on the overlay with a small screen res. Does anyone have a code to make it a div so I can control it?

[Relentless]

^ For the Music player, just make another div. And put the music code in the div and position it from there.

[alias5731]

I've tried already but the player goes at the top of the page and no matter what position I give it , it won't move...

Here's my music player code:

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

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

How would you put that in a div?

[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}

[alias5731]

the replacing code for the player didn't work so I kept mine but removed the "object" from the 2nd code and now it works fine! It doesn't move around the page anymore. Thanks a lot :D