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.

[vintage-toile]

i have tried this, however the layers with a relative position completely disappeared

[S-Majere]

Either your pixel positions are completely out or perhaps your Z-Index is too low. I'll actually try to give this code a mess-around with tomorrow if I have time and see if I can align it for you. It would be really helpful if you could give me the full code so I know what I'm working with (you can PM me with it if you'd prefer).

[vintage-toile]

i think it's the z-index.
i was just wondering really if there was any almost fixed idea for everything to be aligned in all version of explorers, firefox is always one to annoy me with navigation
thankyou very much for the offer, but i know how time consuming it is and this layout was just for a friend, she'll probably move onto another one soon and i'd hate your hard work wasted, it takes a lot of though.
but thanks

[S-Majere]

I really don't mind helping out, layouting is my vice

There is a surefire way of aligning a layout dead center in all browsers, all resolutions - usually by using the relative position with the 50 percent and minus pixel values.

If you do want a little further help with this, by all means let me know!

[vintage-toile]

thankyou ever so much
i managed to fix it in the end and the layout got accepted on CB as well, so it was a good outcome.
thanks for offering though.

[S-Majere]

Awesome - glad you got it sorted! I'll moosey over and take a look in a moment.

Topic Closed.