Odd Internet Explorer 7 bug; not calculating padding on links correctly

Question

It would appear that I am suffering from a new bug in IE7, as I can't seem to find any reference to it anywhere else. It is best explained using screenshots, so here are a couple of links (and as a note, it's not a requirement for it to work in IE6, so I don't even want to know what it looks like under that!):

How it should be displayed (using Safari 4): http://dl-client.getdropbox.com/u/45961/safari4.png

How IE7 is displaying it: http://dl-client.getdropbox.com/u/45961/ie7.png

Here's the CSS for that menu 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;
}

And here is the 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>

Any ideas?

Answer 1

top and bottom padding are not supported on inline elements (some browsers will render it, others won't)

Here's a good article on the problem:

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

If you really need correct padding, you should change the menu items to "display:block" and "float:left"

Answer 2

Hehe, activa beat me to it. Indeed, move your margin/padding to the A element, kinda like so:

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 {

}