Darstellungsprobleme IE / Firefox

[Marco]

Hallo Ihr,

ich habe unter

http://www.dikta.de/test_2/test.html

mal ein grobes Gerüst einer HP gebastelt. Allerdings habe ich ein Problem mit der Darstellung im IE:

Ihr seht sicherlich die obere Navigationsleiste. Mit Firefox sieht der Rahmen gut aus, er hat um die Buttons denselben Abstand. Beim IE hingegen ist der Rahmen 'kleiner' wie die Buttons. Wieso ist das denn so?

Meine zweite Frage bezieht sich auf den Hover-Effekt: beim IE funktioniert der Hover nur, wenn man mit der Maus über einen Text fährt, nicht aber beim kompletten Button. Wie kann ich das Problem elegant kösen? Mit Leerzeichen?

Vielen Dank für eure Hilfe.

Gruß, Marco

CSS:

/*
 Datei: formate.css
 CSS-Formate fuer www.dikta-gourmet.de
*/

body {color: black; background-color: white; font-size: 100.01%; font-family: Helvetica,Arial,sans-serif; padding: 0em; margin: 0px;}

ul#Navigation {font-size: 0.70em; float: left; width: 150px; margin: 0; padding: 0;}
ul#Navigation li{list-style: none; margin: 0; padding: 2px;}
ul#Navigation a{display: block; padding: 0.2em; font-weight: bold; text-decoration: none;}
ul#Navigation a:link{color: black; background-color: #E0E0E0;}
ul#Navigation a:visited{color: #767676; background-color: #E0E0E0;}
ul#Navigation a:hover{color: white; background-color: #0000FF;}
ul#Navigation a:active{color: blue; background-color: #E0E0E0;}

div#Navigation{padding: 5px; border-width: 1px; border-color: #E0E0E0; border-style: solid; text-align: left; position:absolute;
 width:150px; top:100px; left:10px; background-color:#FFFFFF; z-index:2; min-width: 150px;}
div#Navigation h1{font-family: Helvetica,Arial,sans-serif; font-size: 1.5em; margin: 0 0 1em; color:green;}
div#Navigation h2{font-size: 1.2em; margin: 0 0 1em;}
div#Navigation p{font-size: 1em; margin: 1em 0;}

div#Logo{padding: 5px; border-width: 0px; position:absolute; width:150px; top:10px; left:10px; z-index:2}

div#Inhalt{padding: 5px; border-width: 1px; border-style: dashed; text-align: center; position:absolute; top:100px; left:200px; width:80%;   height:80% /*min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */}
div#Inhalt h1{font-family: Courier; font-size:20px}

div#Navigation_oben{padding: 5px; border-width: 1px; border-color: #E0E0E0; border-style: solid; text-align: center;
 position:relative; /*height:98%; */ width:700px; height:21px; top:38px; left:200px;}
div#Navigation_oben {font-size: 0.70em; float: left;}
div#Navigation_oben a{display: block; padding: 0.2em; font-weight: bold; text-decoration: none;}
div#Navigation_oben a:link{color: black; background-color: #E0E0E0;}
div#Navigation_oben a:visited{color: #767676; background-color: #E0E0E0;}
div#Navigation_oben a:hover{color: white; background-color: #0000FF;}
div#Navigation_oben a:active{color: blue; background-color: #E0E0E0;}

div#Navi_inhalt_oben_1{background-color:#E0E0E0; padding: 0px; border-width: 0px; text-align: center; height:20px; width:230px;
 position:absolute; left:5px;}
div#Navi_inhalt_oben_2{background-color:#E0E0E0; padding: 0px; border-width: 0px; text-align: center; height:20px; width:230px;
 position:absolute; left:240px;}
div#Navi_inhalt_oben_3{background-color:#E0E0E0; padding: 0px; border-width: 0px; text-align: center; height:20px; width:230px;
 position:absolute; left:475px;}