CSS und IE

[Iti88]

Ich hab folgendes Problem.
Ich bin im moment dabei einer Seite mit hilfe von css ein schickes layout zu verpassen. Nun streikt der IE aber bei meiner Mouseoverfunktion. Der FF stellt alles sauber dar, nur der IE streikt mal wieder. Statt, dass die ganze box ausgefüllt wird, füllt der IE nur den Bereich um die Schrift.


Index.html:

...      
<div id=\"navi\">\n";
         <ul>\n";
             <li><a href=\"TEST\">Link4</a></li>\n";
             <li><a href=\"TEST\">Link3</a></li>\n";
             <li><a href=\"TEST\">Link2</a></li>\n";
             <li><a href=\"TEST\">Link1</a></li>\n";
             <li><a href=\"TEST\">Start</a></li>\n";
         </ul>\n";
 </div>\n";
...

page.css:

...
/*  Navigation   */

#navi
{
  float:            left;
  text-align:       right;
  background: url(/images/navi.jpg) no-repeat;
  width:            700px;
  height:           40px;
  padding-right:    50px;
  padding-top:      10px;
}

#navi ul
{
  width: 434px;
  float: right;
}

#navi li
{
  float: right;
  list-style-type:  none;
  margin-right:     5px;
  border-left: 1px solid #ADADAD;
  border-right: 1px solid #ADADAD;
  padding:          4px 8px 4px 8px
}

#navi li a
{
 display: block;
 text-decoration: none;
 font-weight: bold;
 color: #FFF;
}


#navi li:hover, #navi li:active          /* Reicht für FF */
{  
 text-decoration: none;  
 font-weight: bold;  
 color: #FFF;  
 background: url(/images/navi-li-bg.gif) bottom left repeat-x;
}

#navi li a:hover, #navi li a:active           /* Für IE, */
{                                                /*hier wird aber nur um die */
 text-decoration: none;                  /* Schrift herum der BG angezeigt.*/
 font-weight: bold;  
 padding:          4px 8px 4px 8px
 color: #FFF;
 background: url(/images/navi-li-bg.gif) bottom left repeat-x;
}

/*  Ende Navigation  */
...

weiß einer, wie ich das für den IE hin bekomme?

[Iti88]

hab die Lösung, für alle dies interessiert (bin bei einem "Unfall" darauf gestoßen):

...
/*  Navigation   */

#navi
{
  float:            left;
  text-align:       right;
  background: url(/images/navi.jpg) no-repeat;
  width:            700px;
  height:           40px;
  padding-right:    50px;
  padding-top:      10px;
}

#navi ul
{
  width: 434px;
  float: right;
}

#navi li
{
  float: right;
  list-style-type:  none;
  margin-right:     5px;
  border-left: 1px solid #ADADAD;
  border-right: 1px solid #ADADAD;
  padding:          4px 8px 4px 8px
}

#navi li a
{
 display: block;
 text-decoration: none;
 font-weight: bold;
 width: 60px;        /*die größen Angabe von a ist entscheidend*/
 height: 25px;
 color: #FFF;
}


#navi li a:hover, #navi li a:active          
{  
 text-decoration: none;  
 font-weight: bold;  
 color: #FFF;  
 background: url(/images/navi-li-bg.gif) bottom left repeat-x;
}


/*  Ende Navigation  */
...