The same in every browser, DIV Options

[synthase]

So I'm having a little trouble...
how can you make your codes work in every browser? Or in different monitor pixels? Work so that they don't look different or misplaced? Right now my monitor screen is 1920x1200, but when I resize it to 1024x768, the whole comment section moves up.
Is there a way so that it works for everybody?

(example is on my cB profile)

Thank you cB!

[S-Majere]

Hmmm, I'd go with the position absolute/relative fiddle here. Could you post your code for me so I can try this out on a dummy profile?

[synthase]

Hmmm, I'd go with the position absolute/relative fiddle here. Could you post your code for me so I can try this out on a dummy profile?

sure.

<style type="text/css">


body{
background-color: #e4e9e8;
background-image: url("URLTOBACKGROUNDIMAGE");
background-repeat: repeat;
scrollbar-arrow-color:######;
scrollbar-track-color:#####;
scrollbar-shadow-color:#####;
scrollbar-face-color:#####;
scrollbar-highlight-color:#####;
color: #####;
}






#profile div#stats{display:none !important;z-index: 13;}
#profile div#splash{display:none !important;z-index: 12;}
#profile div#bestfriends {display:none!important;z-index: 11;}
#profile div#aboutme {display:none !important;z-index: 10;}
#profile div#contactme {display:none!important;z-index: 9;}
#profile div#links{display:none!important;z-index: 8;}
#profile div#recententries {display:none!important;z-index: 7;}
#profile div#favorites {display:none !important;z-index: 6;}
#profile div#submissions {display:none !important;z-index: 5;}
#profile div#skills {display:none !important;z-index: 4;}
#profile div#recentphotos{display:none !important;z-index: 3;}
#profile div#footer{display:none !important;z-index: 2;}
#profile div#comments{position: absolute; left: 32px; margin-left: ###px; top: 100px; margin-top; 50px; width: 630px; height: 145px; overflow:auto;z-index: 0;}

#mycupoftea{position: absolute; left: 30%; margin-left: #px; top: 0%; margin-top: 10%; width: ###px; height: ###px; z-index: 1;}



</style>

under construction


<div id="mycupoftea"><img src="http://img217.imageshack.us/img217/1609/mycupoftealr0.png" alt="text" border="0"></div>

[S-Majere]

Yeah, your positioning is a little crazy

It would be better if you just positioned the whole thing to the right (and have a definite right or left aligned layout rather than one floated several hundred pixels away from the screen edge); but as it is I've positioned it so that comments are aligned in whatever browser and resolution. It's not perfect, but I'm a little strapped for time today.

CODE

<style type="text/css">


body{
background-color: #e4e9e8;
background-image: url("URLTOBACKGROUNDIMAGE");
background-repeat: repeat;
scrollbar-arrow-color:######;
scrollbar-track-color:#####;
scrollbar-shadow-color:#####;
scrollbar-face-color:#####;
scrollbar-highlight-color:#####;
color: #####;
}






#profile div#stats{display:none !important;z-index: 13;}
#profile div#splash{display:none !important;z-index: 12;}
#profile div#bestfriends {display:none!important;z-index: 11;}
#profile div#aboutme {display:none !important;z-index: 10;}
#profile div#contactme {display:none!important;z-index: 9;}
#profile div#links{display:none!important;z-index: 8;}
#profile div#recententries {display:none!important;z-index: 7;}
#profile div#favorites {display:none !important;z-index: 6;}
#profile div#submissions {display:none !important;z-index: 5;}
#profile div#skills {display:none !important;z-index: 4;}
#profile div#recentphotos{display:none !important;z-index: 3;}
#profile div#footer{display:none !important;z-index: 2;}

#profile div#comments{top:630px;right:270px;position:absolute;width:650px!important;width:650px;height:140px;padding:1px;z-index:2;
overflow:auto;visibility:visible;
border: 0px dashed; border-color:3F080A;
text-align:justify;background-color:transparent;}

#profile div#comments.div{width:650px!important;width:650px;background-color:transparant;overflow:hidden;visibility:visible;text-align:justify;padding:1px;margin-left:1px;margin-top:0px;margin-bottom:0px;}


#headerm{top right no-repeat;top:120px;right:250px;z-index:1;display:block;position:absolute;visibility:visible;}



</style>

under construction


<div id="headerm"><img src="http://img217.imageshack.us/img217/1609/mycupoftealr0.png" alt="text" border="0"></div>

[synthase]

^ wow thanks! Thats awesome! So in future layouts, I should position things in an easier alignment?
Thanks for the help!

[S-Majere]

Pretty much, yeah.

Glad it worked out for you.

Topic Closed.