Ei toimi kuin IE:llä

Ongelmana on se, että sivut näyttävät kyllä hyvältä kun niitä katsotaan IE:llä, mutta esim. Firefoxilla katsottaessa kaikki elementit ovat väärässä paikassa yms. En ole koodannut paljoakaan css:llä ja tarvitsenkin kiireesti apua. Tässä on koodia:

* {
padding : 0;
margin : 0;
}

body {
color : #000;
padding : 0;
background : #a9c987;
font-size : 11px;
font-family : Verdana;
margin-top : 50px;
text-align : center;
}

#main {
border : 0;
width : 661px;
background : #a9c987 url('kuvat/tausta.jpg') left;
border-collapse : collapse;
padding : 0;
margin : 0 auto;
text-align : center;
}

#header {
border : 0;
width : 661px;
height : 337px;
background : #ffffff url('kuvat/header.jpg') no-repeat top left;
}

ul#navi {
background : #ffffff;
width : 556px;
height : 30px;
border : 0;
list-style : none;
margin-top : 294px;
}

ul#navi li {
float : left;
}
#navi a {
display : block;
float : left;
text-decoration : none;
}

.etusivu {
background : url(navi/etusivu.jpg) no-repeat 0 0;
width : 86px;
height : 30px;
}

.etusivu:hover {
background : url(navi/etusivu.jpg) no-repeat 0 -30px;
width : 86px;
height : 30px;
}

.ajankohtaista {
background : url(navi/ajank.jpg) no-repeat 0 0;
width : 138px;
height : 30px;
}

.ajankohtaista:hover {
background : url(navi/ajank.jpg) no-repeat 0 -30px;
width : 138px;
height : 30px;
}