Layout., My Layout looks great on my computer but messed up on other peoples. Options

[Azn_Babeii]

My Layout looks great on my computer but messed up on other peoples.
WHY? how go i fix it?

this is my xanga
www.xanga.com/azn_babeii

what should i do? =[
it would mean alot if you could help. thanks =]

[MissHygienic]

You need to fix your blog's positioning. Somewhere in your code, play with the DIV settings. I viewed the source on your page, and the problem lies somewhere here.

CODE

table.left {
/* this edits the menu module */
width:180px;
color:000000;
background-color:#COLOR CODE;
BORDER: #COLOR CODE #px solid;}

table.blogbody tr td {
/* this edits the left margin of blog */
width:0px;
padding-left: 0px;}

table.blogbody {
/* this edits the other the place where the blog is */
background-color:transparent;
family-font: georgia;
BORDER: #COLOR CODE #px solid;
width:###px;} /* <-- The width for this should be around 5-15 pixels less then the width for your blog's div layer. */

[Azn_Babeii]

CODE

You need to fix your blog's positioning. Somewhere in your code, play with the DIV settings. I viewed the source on your page, and the problem lies somewhere here.

CODE

table.left {
/* this edits the menu module */
width:180px;
color:000000;
background-color:#COLOR CODE;
BORDER: #COLOR CODE #px solid;}

table.blogbody tr td {
/* this edits the left margin of blog */
width:0px;
padding-left: 0px;}

table.blogbody {
/* this edits the other the place where the blog is */
background-color:transparent;
family-font: georgia;
BORDER: #COLOR CODE #px solid;
width:###px;} /* <-- The width for this should be around 5-15 pixels less then the width for your blog's div layer. */

i just went to someones house and the layout also worked just fine. Can it be something is wrong with her computer?

[MissHygienic]

No, nothing is wrong with anyone's computer, it varies because people use different Internet browsers. Do you use Internet Explorer? Because a lot of layouts that work in IE do not in Firefox or Opera.

All you have to do is play with the codes/DIV settings to make it browser-friendly.

[Azn_Babeii]

oh i see, well i use At&T yahoo.
i also checked on Internet explorer.

it seems just not to work on firefox. =[
i will play with the code u sent me.

thanks for the help =]

[Azn_Babeii]

also does it mean i should fix the blog to fit firefox? or interenet explorer?

[MissHygienic]

I put your Xanga through browser compatibility checks, and it looks fine in Internet Explorer, but it looks like a jumbled mess in Firefox. Your profile module is on the wrong side, and the blog's positioning is in the middle of the layout, so your text isn't even readable.

[Azn_Babeii]

yeah i know T____T;;
i checked. i was just wondering if i move the blog to its correct spot on Firefox, wouldnt it mess up on interenet explorer?

btw. thank you so much for your time.

[Azn_Babeii]

so im trying to move the <div> box to fit Firefox.
but the "About me" box wont move all the way to the left. it only moves so far.. =[

so what now?

[Smarmosaur]

if you move it around for firefox, it will mess up in other browsers. different browsers read things differently and different resolutions can effect positioning.
try this:
use _top:#px for positioning in IE. to position for mozilla, just change around top:#px

so it will look something like:

CODE

<div style="width:#px; height:#px; _top:#px; _left:#px; top:#px; left:#px;">

[twodreamlovers]

for me, it's messed up in both IE and FF. maybe my version is different for IE. i just went to your xanga. i'm checking your source. you haven't fully changed everything.

only keep # if you're replacing with color. there are 7 zeros for background color.

CODE

/* edits the date */
div.blogheader, .caption
{background-image: url();
background-repeat:no-repeat;
background-position:center;
font-family: Georgia;
text-transform:bold;
font-size:#14px;
line-height:#px;
font-weight:normal;
color:#D93A43;
letter-spacing:2px;
background-color:#0000000;
text-align:center;
border:1px solid #D93A43;}

edit the border and font size

CODE

input, select, textarea, iframe.htmleditor, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
border: #px solid #000000;
font:normal #9px georgia;
background-color: #000000;
font-color:#D93A43;}

edit the border and the width

CODE

table.blogbody {
/* this edits the other the place where the  blog is */
background-color:transparent;
family-font: georgia;
BORDER: #COLOR CODE #px solid;
width:###px;} /* <-- The width for this should be around 5-15 pixels less then the width for your blog's div layer. */

edit the font color, font size, font family, border color, border width

CODE

table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-image: url();
background-color:none;
color: #COLOR CODE;
font: bold #pt FONT FAMILY;
text-transform: none;
text-align:center;
border: #COLOR CODE #px solid;}

edit the background color, border color, border width

CODE

table.left {
/* this edits the menu module */
width:180px;
color:000000;
background-color:#COLOR CODE;
BORDER: #COLOR CODE #px solid;}

edit the line height and font size

CODE

a:link
{line-height: #pt;
font-family: georgia;
font-weight:normal;
color:#D93A43;
text-transform:underline;
font-size:#10pt;
cursor:crosshair;}

edit the font size

CODE

A:hover {font-family:georgia;
color:#FFFFFF;
text-transform: uppercase;
cursor: crosshair;
font-weight:bold;
font-size:#pt}

there don't really solve the whole "mess up" thing, but it does solve the customization.

[twodreamlovers]

now for the position. don't just center the navigation. place them in a div and position them. i may be repeating some of the stuff other people already said.

take these out of your first div.

CODE

margin-top: -497px;
margin-left: 250px;

replace them with

CODE

top:XXXpx;
left:XXXpx;

remember to replace the "XXX".

now for your second div, it doesn't seem to end...if you're trying to position the entries. can't you just position them within the stylesheet? such as...

CODE

table.blogbody{
top:XXXpx;
left:XXXpx;
}

i'm not so sure if this will work since it's a table...but worth a try.

if it doesn't work replace for your second div

CODE

margin-top: -403px;
margin-left: 583px;

with

CODE

top:XXXpx;
left:XXXpx;

of course, like the first one, replace the "XXX"

hope that helps.