css Navigation verschiebt sich bei hover

[markus]

Hi!

Ich möchte eine Navigationsbar am linken rand meine Site haben.
Die Links befinden sich in einerm <ul><li>link</li></ul> gerüst, dieses ganze gerüst in einem div-container also
<div>
 <ul>
  <li><a>link1</a></li>
  <li><a>link2</a><li>
 </ul>
</div>

Das ganze habe ich mir in css schön formatiert und sieht auch so aus, wie ich es gern haben möchte. Unter anderem sollen die Links einen Abstand von 5pixeln zum Container-Div haben.

Bei einem hover der Links werden diese fetter, dadurch vergrößtern sich die ganzen Container. Das ganze passiert nur einmal, beim ersten drüberfahren der Links.

Wie kann ich das Verhalten abstellen?

Getestet wurde das ganze bislang nur unter dem IE7, andere Browser wurden noch nicht getestst, werde das heute abend bzw. morgen nachholen.

Achso, eine weitere Frage haett ich noch, die Navigationsleiste ist per float:left in einem umschließenden Container eingebunden. Wie kann ich sicherstellen, das die Navigationsleiste nie höher ist wie der sie umschließende Container?

Die erste Frage zu beantwortet wäre allerdings wichtiger ^^

vielen Danke im vorraus für die Mühen

gruß markus

Die relevanten Codezeilen sind:

css:

#content_container{
 background-color: #FFFFFF;
 border: 1px solid #000000;
 padding: 20px;
}

#navi{
 float:left;
 width:170px;
 margin-left:0px;
 border: 1px solid #000000;
 padding: 0px 0px 0px 5px;
 text-align: left;
 margin-top: 0px;
 margin-right: 30px;
 margin-bottom: 0px;
}

ul#navigation{
 display: block;
 padding:0px;
 margin: 0px;
}

ul#navigation li{
 list-style-type: none;
 padding-top: 2px;
 padding-bottom: 3px;
 margin: 0px;
}

ul#navigation a {
 color: #000000;
 text-decoration: none;

}
ul#navigation a:link {

}
ul#navigation a:visited {

}
ul#navigation a:hover {
 color: #CC0000;
 font-weight: bolder;
 text-decoration: underline;

}
ul#navigation a:active {

}

#naviheader{
 font-size: large;
 color: #000000;
 background-color: #FFCC00;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-bottom-style: solid;
 border-top-color: #000000;
 border-right-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;
 line-height: 1.5em;
 vertical-align: middle;
 padding-left: 5px;
 font-weight: bolder;
 border-top-style: none;
 border-right-style: none;
 border-left-style: none;
 margin-left: -5px;
}

#content{
}

html:

<div id="content_container">

<div id="navi">
     <div id="naviheader">Navigation</div>
    <ul id="navigation">
   <li><a href="#">Startseite</a></li>
   <li><a href="#">Das Untrnehmen</a></li>
   <li><a href="#">Leistungen</a></li>
      <li><a href="#">Preise</a></li>
         <li><a href="#">Wussten Sie schon?</a></li>
         <li><a href="#">Anfahrt</a></li>
         <li><a href="#">Impressum</a></li>
     </ul>

</div>

<div id="content">Raum für den Inhalt von id "content"</div>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
</div>