Doppelter border bei gefloateter Navi

[Willi]

Hallo,

Ich habe heute noch eine CSS-Frage an die Profis hier :)
Ich habe eine Navigation in einer ungeordneten Liste (ul) mit Listenpunkten (li) welche ich jeweils immer links floate, damit ich eine vertikale Liste bekommen. Jeder Listenpunkt hat eine "doppelte" Linie (das li-Tag hat eine Eigenschaft border, genauso wie die Links innerhalb des Listenpunktes [li a]).
Das funktioniert auch alles ganz gut, bis auf den aktiven Listenpunkt, links und rechts von ihm ist geht die Linie bis nach ganz unten, obwohl sie schon da aufhören sollte, wo sie auf die andere Linie trifft.
Okay, ist vielleicht nicht so gut erklärt, aber schaut es euch mal an: hier

Kann mir jemand erklären woran das liegt?
Und wie ich es beheben kann?

Grüße,
Willi

Der Quellcode:
CSS:

  
.Navi { margin-top: 5px; clear: both;width: 100;}  
.Navi ul {  
 margin: 0;  
 padding: 0 0 0 10px;  
}  
.Navi li {  
 list-style: none;  
 margin-right: 3px;  
 float: left;  
 border-width: 1px 1px 0px 1px;  
   border-color: #999;  
   border-style: solid;  
}  
.Navi li a {  
 text-decoration: none;  
 padding: 2px 5px 3px 5px;  
 display: block;  
   color: #666;  
 border-style: solid;  
   border-width: 1px 1px 0 1px;  
   background-color: #e8e8e8;  
   border-color: #fff;  
}  
.Navi li.activeNavi a {  
 border-bottom: 0px;  
 padding-bottom: 5px;  
   color: #fff;  
   background-color: #777;  
   position: relative;  
   z-index: 0;  
}  
.Navi li a:hover {  
   color: #333;  
   background-color: #fff;  
}  
.Navi li a:focus {  
   color: blue;  
}  
.Navi li.activeNavi a:hover {  
   color: #fff;  
   background-color: #777;  
}  

[Powl]

Hallo,

Dem Listenpunkt ist es egal was innen oder außen vor sich geht. Wenn Du sagst Linie links,oben,rechts, dann macht der das auch. Die äußere Linie würde stimmen, wenn das li Element ca. 2px höher enden würde. Also lass es 2px höher enden.
Dann besteht das Problem mit dem a Element, das muss ja 2px weiter runter als das umgebende li Element. Also musst Du dem li sagen, das beinhaltete Elemente die größer sind,  als es selbst, nicht gescrollt, nicht abgeschnitten, sondern angezeigt werden. overflow:visible; meine ich mich zu erinnern, aber schau das selber nochmal nach.

Das müsste so grob der Weg sein.

Vielleicht gefällt Dir aber auch sowas?

netten Tag
^da Powl