unerklärlicher "Fehler" bei absoluter Positionierung

[Der Dicki]

Hallihallo!

Ich habe auf dieser Seite ein mir unerklärliches Phänomen.

Und zwar geht es um die Navigation, genauer gesagt um die abgerundeten Ecken darin. (Ich denke, es sollte zumindest zu sehen sein, wo sie hin _sollen_ ;) )

Zum HTML:
Die Navigation als solche ist eine Liste (ul) mit der ID #navigation, welche per float:left; am linken Bildschirmrand klebt. Darin enthalten sind nach folgendem Schema die Navigationslinks:

  
<ul id="navigation">  
  <li>  
     <a class="navibutton" href="linkziel">  
         Linktext  
         <div class="navicorner topright"></div>  
         <div class="navicorner btmright"></div>  
     </a>  
  </li>  
  
  <!-- und natürlich noch ein paar weitere <li>s... -->  
</ul>  

Per CSS möchte ich dann die beiden <div>s innerhalb der <a>s absolut positionieren, und zwar jeweils am rechten oberen bzw. rechten unteren Rand:

  
#navigation {  
 float: left;  
 width: 16em;  
 /* height: 100%; */  
 list-style-type: none;  
 padding: 0em;  
 margin-left: 0em;  
 margin-right: 2.5em;  
}  
  
#navigation li {  
 position: relative;  
 padding: 0em;  
 height: 2.6em;  
 margin: 0em;  
 margin-bottom: 0.5em;  
}  
  
#navigation li a.navibutton:link , #navigation li a.navibutton:visited{  
 display: block;  
 text-align: right;  
 color: #E6CD1F;  
 font-weight: bold;  
 text-decoration: none;  
 padding: 0em;  
 padding-right: 1em;  
 padding-top: 0.5em;  
 margin: 0em;  
 height: 2.2em;  
 margin-top: 0.2em;  
 margin-bottom: 0.2em;  
 background-color: #4A693C;  
 z-index: 1;  
}  
  
#navigation li a.navibutton:hover {  
 background-color: #E6CD1F;  
 color: #4A693C;  
}  
  
#navigation li a.actsite:link, #navigation li a.actsite:visited {  
 background-color: #E6CD1F;  
 color: #4A693C;  
}  
  
.navicorner {  
 position: absolute;  
 padding: 0px;  
 margin: 0px;  
 border: none;  
 width: 1em;  
 height: 1em;  
 z-index: 2;  
}  
  
.topright {  
 top: 0em;  
 left: 15em;  
 background-image: url('images/ecke_gruen_ro.gif');  
        background-repeat: no-repeat;  
        background-position: top right;  
}  
  
.btmright {  
 /* top: 1.6em; */  
 bottom: 0em;  
 left: 15em;  
 background-image: url('images/ecke_gruen_ru.gif');  
        background-repeat: no-repeat;  
        background-position: bottom right;  
}  

Der Internet Exploder zeigt mir genau das Ergebnis, welches ich erreichen wollte. Der Firefox hingegen zeigt mir die rechte untere Ecke nicht in der "richtigen" Position (wobei ich davon ausgehe, daß ausgerechnet DER es _richtig_ macht.)

Ich habe auch schon versucht, die beiden Ecken _beide_ mit der Eigenschaft top:xxx em zu positionieren, mit einem sehr ähnlichen unglücklichen Effekt.
Ebenso habe ich in allen in Frage kommenden Elementen schon mit allen margins, paddings und borders herumprobiert, auch ohne Erfolg.

Meine Frage also: Was habe ich übersehen, bzw. nicht bedacht? Habe ich mich in Denkfehler verrannt? Wie kriege ich die rechte untere Ecke an den rechten unteren Rand des Links?

Irgendjemand eine Idee?

Viele liebe Grüße,
Der Dicki

PS: Nocheinmal die Links:
    HTML : http://derdicki.dyndns.org/test/quaritsch/index.html
    CSS  : http://derdicki.dyndns.org/test/quaritsch/includes/css/screen.css