Box-Modell - wie lösen?

[juewi]

Hallo!

Ich habe auf dieser Testseite eine Navigation, deren "a"-, "li"- und "ul"-Elementen ich padding-/margin-Werte zuweise (danke @ Gunnar Bittersmann!).

Nun hat ja leider der IE Probleme mit der Addition der Werte (Box-Modell), sodass mir dort die Navi-Bestandteile über das div nach unten rausragen.

(Weiters ist auch Kopf- und Fusszeile durch padding beim "p"-Element im IE höher als in den anderen Browsern.)

Trotz vielem Herumlesen und Probieren komm ich nicht drauf, was ich in meinem Fall hier machen bzw. zusätzlich codieren muss.
(Anmerkung: falls der strict-Doctype ein Thema ist: diesen würde ich nach Möglichkeit behalten wollen da ich noch Deckkraft-Regelungen einbaue)

Danke für eure Hilfe!

CSS-Code:
------------------------------------------------~~~css

#navi {
float: left;
height: 655px;
width: 160px;
padding: 0;
margin: 0 0 0.5em 0;
}
#navi ul {
margin-bottom: 2.65em;
}
#navi ul li {
width: 160px;
margin-bottom: 0.5em;
text-align: center;
list-style: none;
border: 1px solid #000;
}
#navi a {
padding: 0.5em;
display: block;
}

  
  
HTML-Code:  
\------------------------------------------------  
~~~html
<div id="navi">  
<ul>  
  <li><a href="#">HOME</a></li>  
  <li><a href="#">E-MAIL</a></li>  
</ul>  
<ul>  
  <li><a href="#">HOCHZEIT</a></li>  
  <li><a href="#">MENSCHEN</a></li>  
  <li><a href="#">KINDER</a></li>  
  <li><a href="#">EROTIK</a></li>  
  <li><a href="#">TIERE</a></li>  
  <li><a href="#">NATUR</a></li>  
  <li><a href="#">ALLERLEI</a></li>  
  <li><a href="#">SERIEN</a></li>  
</ul>  
<ul>  
  <li><a href="#">&Uuml;BER MICH</a></li>  
  <li><a href="#">DEIN SHOOTING</a></li>  
</ul>  
<ul>  
  <li><a href="#">LINKS</a></li>  
  <li><a href="#">G&Auml;STEBUCH</a></li>  
</ul>  
</div>  

LG, Jürgen