Odd Internet Explorer 7 Bug; Das Berechnen von Padding auf Links nicht korrekt

Question

Es scheint, dass ich unter einem neuen Fehler in IE7 leide, da ich nirgendwo sonst einen Hinweis darauf finden kann. Es ist am besten mit Screenshots erklärt, also hier sind ein paar Links (und als Anmerkung, es ist keine Voraussetzung, damit es in IE6 funktioniert, also will ich nicht einmal wissen, wie es darunter aussieht!):

Wie es angezeigt werden soll (mit Safari 4): http://dl-client.getdropbox.com/u/45961/safari4.png

Wie IE7 wird die Anzeige: http://dl-client.getdropbox.com/u/45961/ie7.png

Hier ist die CSS für das Menü chunk:

#mm #leftNav .navigation { 
    width: 100%; 
    margin-bottom: 0; 
    float: left; 
} 

#mm #leftNav li { 
    list-style: none; 
    display: inline; 
    margin: 0; 
} 

#mm #leftNav .navigation li ul { 
    display: none; 
} 

#mm #leftNav .navigation li a { 
    text-decoration: none; 
    color: #ffffff; 
    font-size: 11pt; 
    padding-left: 20px; 
} 

#mm #leftNav .navigation li { 
    cursor: pointer; 
    margin-right: 4px; 
    padding-left: 8px; 
    padding-right: 8px; 
    padding-top: 10px; 
    padding-bottom: 8px; 
    overflow: visible; 
} 

.menu_item { 
    background: #419185; 
} 

.menu_item:hover { 
    background: #48a093; 
} 

.currentcat { 
    background-color: #4aa8a6; 
} 

.currentcat:hover { 
    background: #4aa8a6; 
} 

Und hier ist der HTML:

<div id="mm"> 
    <div id="leftNav"> 
     <ul class="navigation"> 
      <li class="menu_item"> 
       <a class="icon icon-base">Base</a> 
      </li> 
      <li class="menu_item"> 
       <a class="icon icon-devices">Devices</a> 
      </li> 
      <li class="menu_item"> 
       <a class="icon icon-management">Management</a> 
      </li> 
      <li class="menu_item"> 
       <a class="icon icon-iptools">IP Tools</a> 
      </li> 
      <li class="menu_item"> 
       <a class="icon icon-config">Configuration</a> 
      </li> 
      <li class="menu_item"> 
       <a class="icon icon-admin">Administration</a> 
      </li> 
     </ul> 
     <div id="subnav"></div> 
    </div> 
</div> 

Irgendwelche Ideen?

Answer 1

oben und unten padding nicht auf Inline-Elemente unterstützt (einige Browser es machen wird, werden andere nicht)

Hier ist ein guter Artikel über das Problem:

http://www.maxdesign.com.au/presentation/inline/

Wenn Sie wirklich Brauchen Sie richtige Polsterung, sollten Sie die Menüpunkte zu "display: block" und "float: left" ändern

Answer 2

Hehe, activa schlug mich dazu. Tatsächlich bewegen Sie die Marge/padding auf das A-Element, so irgendwie wie:

mm #leftNav .navigation li a {

text-decoration: none; 
color: #ffffff; 
font-size: 11pt; 
display:block; 
float:left; 
background: #419185; 
margin-right: 4px; 
padding-left: 20px; 
padding-right: 8px; 
padding-top: 10px; 
padding-bottom: 8px; 

}

mm #leftNav .navigation li {

cursor: pointer; 

}

.menu_item {

}