Tre forskellige udseender af min side

Inspireret af bogen "CSS -- HTML Utopia: Designing Without Tables
Using CSS" har jeg prøvet at lave en side, hvor menuen er foroven.

Det ser helt fint ud i Opera, men i MSIE ligner menuen trapper, og i
Mozilla jeg-ved-ikke-hvad.

http://www.foxladi.com/testcss/

Jeg har brugt denne css til den underliggende grå menu:

#menu{
    position: absolute;
    padding-bottom: 24px;
    top: 100px;
    height: 1px;
    width: 60%;
    background: #A5B5C6;
    color: #000;
    float: left;
}

og dette til selve menu-knapperne:

ul#mainnav{
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #D6D6D6;
}

ul#mainnav li a:link, ul#mainnav li a:visited{
    text-decoration: none;
    display: block;
  width: 7%;
    padding: 3px 3%;
    background-color: #5C6F90;
    font: bold 10pt arial, sans-serif;
    color: #fff;
    margin: 1px 1px 0 1px;
    float: left;
}

ul#mainnav li a:hover{
    background-color: #43616B;
    color: #eee;
    float: left;
}

Desværre kan jeg ikke gennemskue, hvor jeg skal lave om på koden for
at få et resultat i alle browsere, så det ligner resultatet i Opera.

Har nogen af jer en idé?