EDIT: Title should say margin instead of padding .. always mix those two up

I am using the following code to create a mouse-over effect for a navigation bar at http://www.mm2c.com (see left)

I am using Internet Explorer 6.0 and the code works fine as it supposed to do. Unfortunately IE5.5 or IE5.0 (don't ask me about anything non-IE) see the block become 2px less in height when mousing over. Now you might say that's because of the 1px less margin on the hover class than the default class but then it will not work IE6.

I experienced using this code in IE6 while the margin-top and margin-bottom of the hover class is 2px, IE6 created a 1px outside the block which means the complete row grows 2px (one at the top and one at the bottom). Something like what happends in < IE6 only this time it grows.

I thought I used W3C standard CSS but apparentely not :P

Any help on this problem would be greatly appreciated, thanks in advance.

Code:
/* DEV NAVIGATION CLASSES */

a.left-menu-dev:link, a.left-menu-dev:visited {
   cursor: hand;
   height: 15px;
   overflow: hidden; 
   margin-left: 2px;
   margin-right: 2px;
   margin-top: 2px;
   margin-bottom: 2px;
   padding-left: 5px;
   color: #000000;
   text-decoration: none;
   vertical-align: middle;
   display: block; 
} 
 
a.left-menu-dev:hover { 
   cursor: hand;
   height: 15px;
   overflow: hidden; 
   margin-left: 2px;
   margin-right: 2px;
   margin-top: 1px;
   margin-bottom: 1px;
   padding-left: 4px;
   color: #000000;
   background: #6FA0C8;
   border: 1px solid #000000;
   text-decoration: none;
   vertical-align: middle;
   display: block; 
}