Border problem i firefox (og muligvis IE) (HTML+CSS)

Hej Eksperter,

Jeg er i gang med at udvikle en hjemmeside og er støt på et mærkeligt problem, der så vidt jeg kan forstå, opstår fordi firefox (og muligvis IE) fortolker border anderledes end chrome,safari etc.

Jeg har en baggrund som er 100 px og er en sort block i toppen af siden (ligesom den blå boks på eksperten.dk)

Jeg har menuen inden i en div jeg har smidt x antal pixel ned fra toppen så borderen bunden rammer der hvor den sorte baggrund stopper.

Jeg har lavet en menu med en helt almindelig liste i html
<div class="navigation_float">
        <ul class="navigation">
                <li class="navi_item">HOME</li>
                <li class="navi_item"><a href="#">ABOUT</a></li>
                <li class="navi_item"><a href="products.html">PRODUCTS</a></li>
                <li class="navi_item"><a href="#">INSPIRATION</a></li>
                <li class="navi_item"><a href="#">STUFF</a></li>
                <li class="navi_item"><a href="#">PRESS</a></li>
        </ul>
</div>

og stylet den på følgende måde i css:

.navigation {
    margin: 0;
    padding: 10px 10px 5px 0px;
    border-bottom: solid 3px #009ec3;    
}
.navi_item {
    text-decoration: none;
    display: inline;
    height: 16px;
    padding: 0 0 0 10px;
    text-decoration: none;
    color: #FFF;
    font-weight: 100;
}

og alt virker fantastisk i chrome og safari, men hvis jeg kigger på siden i FF, er der 1 pixel mellem borderen og hvor min sorte baggrund slutter.

Screenshot:
Firefox
http://www.billedeupload.dk/upload/files/2010-11/cb6d998c.png

Chrome (og safari)
http://www.billedeupload.dk/upload/files/2010-11/0743805f.png

På forhånd tak for hjælpen!