DIV layout page allignment., in firefox and IE? Options

[vintage-toile]

i've created a new DIV layout for myspace...and it's perfectly alligned in internet explorer, but in firefox, the navigation section is about 200px out of line.
here's the part of the coding which needs to be changed somewhere:

CODE

body {
background-attachment:scroll;
background-color:ef2d8f;
cursor:crosshair;
font-weight:normal;
}

a:link, a:visited, a:active {
font-family:tahoma;
font-size:13px;
font-weight:bold;
color:cecdc9;
text-decoration:none;
}

a:hover {
font-family:tahoma;
font-size:13px;
font-weight:bold;
color:050422;
text-decoration:none;
}

a.nav:link, a.nav:visited, a.nav:active {
text-decoration: none;
    font-family:tahoma;
    font-style: normal;
    font-variant: small-caps;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    color:FFFFFF!important;
    background-color:330a1e;
    border-left: 10px solid;
    border-color:fcccf8 !important;
    border-right: 10px solid;
    border-color:fcccf8 !important;
    cursor: crosshair;
    display: block;
    margin: 0;
        width: 200px;
    margin-bottom: 0em;
    padding: 0px;
    padding-left: 1px;
    padding-right: 1px;

    }


a.nav:hover {text-decoration: none;
    font-family:tahoma;
    text-align: center;
        font-variant: small-caps;
    font-style:uppercase;
    font-size:18px;
    line-height:20px;
    color:FFFFFF !important;
    background-color:330a1e ;
    border-left: 10px solid;
    border-color:fcccf8 !important;
    border-right: 10px solid;
    border-color:fcccf8 !important;
    cursor: crosshair;
    display: block;
    margin: 0;
        width: 200px;
    margin-bottom: 0em;
    padding: 0px;
    padding-left: 1px;
    padding-right: 1px;}


.header {
position:absolute;
overflow:auto;
top:120px;
left:90px;
background-color:transparent;
border:0px;
}

.navigate {
position:absolute;
overflow:auto;
top:240px;
left:633px;
background-color:transparant;
font-family:times new roman;
font-size:10px;
color:black;
font-weight:normal;
width:300px;
height:200px;
padding:0;
}

.main {
position:absolute;
overflow:auto;
top:665px;
left:120px;
background-color:transparant;
font-family:tahoma;
font-size:12px;
color:FFFFFF;
font-weight:normal;
height:230px;
width:475px;
margin:0;
padding:0;
}


.burnbook {
position:absolute;
overflow:auto;
top:625px;
left:633px;
background-color:transparant;
font-family:tahoma;
font-size:12px;
color:FFFFFF;
font-weight:normal;
height:240px;
width:250px;
margin:0;
padding:0;
}

and it's most likely in the navigation bit...(duhh..)
but i've changed the coding in the navigation to left:50%;
margin-left:000px; as recommended by insurmountable, and for some reason this has now misaligned the layer to the same amount in IE.

does anyone know how i can solve this? and where to put the new amounts so that the entire layout is alligned in all browsers?

[S-Majere]

I would really recommend using position: relative; for your DIVs (save for the main banner image which can be absolutely positioned). You should find that using a relative postion when using left:50%;margin-left:350px; should work out quite nicely.