Nav links appear with wrong margin until hover in IE

I am so close to launching my first Magento project, and the final leg has just been one CSS hurdle after another… mostly with IE.

This last one popped up just after fixing 5 other things, and has not been an issue until now.

In IE, my top nav links (2) are appearing about 20px too high until you hover over them and then they jump into place.

Navigation CSS:

.nav-container { background:#ffffff url(../images/bkg_nav0.jpg) 50% 0 repeat-y; }
#nav { width:918px; margin:0 auto; padding:0 16px; font-size:13px; }

#nav li { position:relative; text-align:left; }
#nav li.over { z-index:998; }

#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none;}
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav ul li.parent a { background:url(../images/bkg_nav2.gif) 100% 100% no-repeat; }
#nav ul li.parent li a { background-image:none; }

/* 0 Level */

#nav li { float:left; }
#nav li.active a { color:#8751b0; }
#nav a { float:left; padding:5px 12px 6px 8px; color:#000000; font-weight:bold; display: block;}
#nav li.over a,
#nav a:hover { color:#8751b0; display: block;}

/* 1st Level */

#nav ul开发者_如何学JAVA li,
#nav ul li.active { float:none; margin:0; padding-bottom:1px; background:#ecf3f6 url(../images/bkg_nav1.gif) 0 100% repeat-x; }
#nav ul li.last { background:#ecf3f6; padding-bottom:0; }

#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }

As you can see, there are no :hover properties with margins that are overriding the original state. I just can't figure this one out.

I have tried Firebug but I just can't relate it to the IE issues. It renders fine in FF...and the IE 'Developer Tools' just can't compare to Firebug...

Please, any help is appreciated!

I had the same issue with a menu and found that removing the "display: block;" fixed this issue with IE.