Dünne störende Linie in FF - in IE aber OK...

Bereinige zunächst mal diese Fehler:
CSS

Dann verwende einen qualifizierten Doctype, damit der IE das CSS-Boxmodell richtig darstellen kann.
Die Speziealangaben für den IE sollten sich damit erübrigen.

Wenn der Fehler dann immer noch besteht, melde dich nochmal.

Versuch's mal so:

Zitat

ul#Navigation a:hover, ul#Navigation span {
border-color: white;
border-left-color: black; border-top: 1px solid black;
color: white; background-color: black;
}

Solche Dinge kannst du löschen, denn 0px ist ja nichts:

border: 0px solid black;

Meine Lösung dazu sah etwas anders aus...

Aber nun die Frage schlechthin. Warum ist da so?
Das kommt doch nicht von irgendwoher. Gibt es dafür eine logische erklärung. ich habe leider bis heute keine.

Der ganze Code ist ziemlich falsch. Insofern war mein Vorschlag lediglich eine "pragmatische" Lösung.
Die Rahmen werden nicht korrekt definiert.

"ul#Navigation span" wird zweimal definiert mit unterschiedlichen Angaben. Dadurch kommt es zu irgendwelchen Konflikten.
Am sinnvollsten sollte das Ganze deshalb nochmals komplett neu definert werden.