Css problem (Ill be asking for help quite often)

ok, in 1024x768 www.redorigin.net looks fine in firefox and i believe ie as well, however when the res changes the text is all screwed up. and if you align the text to center... its not like perfectly aligned in the center its all ****eyed...


can anyone tell me how i can either center align it so it still lines up evenly, or how to make it work like it is in all browsers,


heres the css:

a {
text-decoration: none
}

a:link {color: #2d2d2c; text-decoration: none; }
a:visited {color: #2d2d2c; text-decoration: none; }
a:hover {color: #fff; text-decoration: underline; }
a:active {color: #2d2d2c; }

body {
background: #fff url(bg.gif) repeat-y 50% 0px;
background-attachment: fixed;
}

#header {
text-align: center;
margin-left: 25px;
}

#navlist {
list-style-image: url(bullet.gif);
}

ul li {
font: bold 14px Tahoma, Times New Roman, Times, serif;
color: #902f2f
text-align: left;
margin-left: 11cm;

ok i changed the margin to %'s and i think its fixed now.

I was about to suggest setting the margin-left: 50% earlier, but i am a ccs beginner and was afraid it would be wrong and would wase your time sorry. but good job.

Btw, that huge background you did is not needed. You should crop the image just until it reaches the shadow.

Then just use this for you body css:
Also, you can crop the background image so its only 1px in height which will help you save some bandwidth and save your users some loading time. (not much granted, but every little helps )

[edit] Btw, a better way to do it would be to have a "holder" or "container" div. Basically, You would have a div that would be the same width as the width of your cropped background image, (or whatever) and then you would apply:

To it, which would center the holder div horizontally. You could then put your content inside the holder div, and it would be inside your content area on the background.