lille billede med border bliver ødelagt en smule i firefox

Jeg har lavet en karma system i php og det virker perfekt. Jeg har valgt at vise karma'en i en bar ligsom på eksperten via et billede hvor farven angiver hvor mange procent man har. Det hele virker fint og hvis man har 27% karma er farven 27px bred osv. Der er dog opstået et problem! det er ligsom om der kommer et slags usynligt mellemrum i bunden imellem borderen og billedet. I explorer virker det fint, men i firefox kikser det. Jeg har uploadet et exempel her www.adeee.frac.dk

her er lidt kode i kan arbejde med:

css delen for billederne

.karma {
    font-family: verdana, sans-serif;
    font-size: 10px;
    margin: 0px;
    padding: 0px;
    height: 20px;
    width: 108px;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 0px solid #000000;
    border-bottom: 1px solid #000000;
}
.karma-blank {
    font-family: verdana, sans-serif;
    font-size: 10px;
    margin: 0px;
    padding: 0px;
    height: 20px;
    width: 108px;
    border-top: 1px solid #000000;
    border-left: 0px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

og koden som indsætter billederne:

<font class="karma">
<img src="billeder/procent.bmp" title="$alt" style="height: 12px; width: $width; cursor: hand;">
</font>
<font class=\"karma-blank\">
<img src="billeder/procent_blank.bmp" title="$alt" style="height: 12px; width: $blank; cursor: hand;">
</font>

PS. ingen prædikener om at bmp er dårligt tak! - jeg ved det