Auseinandergezogene Navigation

Ich habe meine Navigationsleiste mit IE 6 getestet. da ist die navigationliste soweit auseinender gezogen. in allen anderen browsern einschl IE 7 nicht. welche css angabe fehlt, ist falsch oder muss geändert werden das sie wie in firefox und allen anderen dichter beieinander liegt.

Dies ist keine werbung für meine page. trotzdem setzte ich den link jetzt rein um sich ein bild machen zu können

http://www.schmidt-meik.de

die css dazu:
http://www.schmidt-meik.de/layout/screen.css

Hier der Code der für die navigation zuständig ist

div#navi {float:left; width:10.0em; margin:5px 0 0 5px; border-right:1px solid #666; padding-right:0.1em;}
ul.navigation {margin:0; padding:0;}
ul.navigation li {list-style:none; }
ul.navigation li a {didplay:block; margin:0; padding:0 0 0 0.3em;}
ul.navigation li a:hover {background:#666; color:#E9E8E6;}

Dank schon einmal für eure unterstützung

diese lösung hatte ich bereits angewendet. aber lief nicht. habe auch auf meheren rechnern sicherhalthalber geschaut. überall der gleiche effekt.

habe es glaube ich jetzt.

So geht es:

div#navi {float:left; margin:5px 0 0 5px; border-right:1px solid #666; padding:0 0.1em 0 0;}
ul.navigation {margin:0; padding:0;}
ul.navigation li {list-style:none; margin:0; padding:0; }
ul.navigation li a {display:block; margin:0; padding:0 0 0 0.3em; width:10.0em; height:auto;}
ul.navigation li a:hover {background:#666; color:#E9E8E6;}

poste es mal falls jamand das gleiche problem hat. falls jemand noch eine bessere lösung weiss, ich bin gerne für lösungen bereit.