help w/ div layout Options

[hazel]

hello... i'm having trouble with my div layout. my screen resolution is 1024x768.
my url is http://www.myspace.com/126450587
this is what it's supposed to look like



but when i changed the resolution of my screen, just to see if it looked alright, the tables are moved to the right. is there a way to keep it on the left, even with different screen resolutions?


here is my style sheet:

CODE

<style type="text/css">
body
{background-color:F4F4F4;
  background-image:url('');
  background-position:right bottom;
  background-repeat:no-repeat;
  background-attachment:fixed;}
td, .text, div, input
{color:B4B4B4 !important;
  font-family: franklin gothic medium;
  font-size:7pt;}
a
{color:41575E !important;
  font-size:8px;
  text-decoration: none !important;}
img
{border:0px;}
table, tr, td
{background:transparent;
  border:0px;}
img, .contactTable
{display:none;}
.bbzContainer img, .comt img
{display:inline;}
table div, td td td, table div div
{visibility:hidden;}
font, a, .bbzsc a
{visibility:hidden;}
marquee
{visibility:visible !important;}
.text, table table table table a,
table table table table div,table table table table div a
{visibility:visible;}
.bbzComment
{You selected to hide comments.}
.bbzsc
{display:none;}
.text, td.text td.text table, .contactTable, .lightbluetext8
{display:none;}
table table, table table td
{padding:0px; height:0px;}

.div1
{background-color:F4F4F4; color:B4B4B4;
width:248px; height:66px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-505px; margin-top:217px; text-align:center;
visibility:visible;}

.div2
{background-color:transparent; width:252px; height:170px;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-505px; margin-top:126px; text-align:center;
visibility:visible;}

.div3
{background-color:FFFFFF; color:B4B4B4;
width:252px; height:400px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-505px; margin-top:292px; text-align:center;
visibility:visible;}
marquee
{z-index:8;}
table div, span, td td td, table div div
{visibility:hidden !important;}
.bbzContainer div, .bbzContainer div font, .bbzContainer div a, .bbzContainer div div, .bbzContainer font a,

.bbzContainer span, .bbzContainer div table a, .bbzContainer div table img, .bbzContainer div table font,

.bbzContainer div table, .bbzContainer div table td, .comt, .comt td, .comt span, .comt a, .comt div  

{visibility:visible !important;}

.bbzDiv {content:"Overlay Generator beta";}

.div4
{background-color:transparent; width:244px; height:221px;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-505px; margin-top:127px; text-align:center;
visibility:visible;}

.div5
{background-color:transparent; width:30px; height:5px;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-392px; margin-top:265px; text-align:center;
visibility:visible;}

.div6
{background-color:F4F4F4; width:118px; height:96px;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-50px; margin-top:157px; text-align:center;
visibility:visible;}
</style>

thanks

[*WHIMSICAL 0NE*]

Yeah, it shows up funny on my screen too. Here's a suggestion.

In your code for your div's change this:

CODE

.div1
{background-color:F4F4F4; color:B4B4B4;
width:248px; height:66px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-505px; margin-top:217px; text-align:center;
visibility:visible;}

To this:

CODE

.div1
{background-color:F4F4F4; color:B4B4B4;
width:248px; height:66px; overflow:auto;
position:absolute;
left:505px; top:217px; text-align:center;
visibility:visible;}

When you had the left:50% it automatically centers it and when you position it, it positions them from the middle of the page instead of from the actual left...

[hazel]

thanks! but it still shows up weird... i wish i knew what was wrong, hehe

[*WHIMSICAL 0NE*]

Double check the way you positioned it. Maybe that's what's causing it?