CSS Menu not looking good with IE8
===

For some reason my horizontal menu looks really bad on IE8 (and probably previous versions as well) (see first pic). No issue with latest version of safari, firefox and chrome (see second pic).
Any idea why and how to fix this?
Thanks


![Issue with IE8][1]


![Menu as it should look][2]


  [1]: http://i.stack.imgur.com/BIJnh.jpg
  [2]: http://i.stack.imgur.com/Gdt0M.jpg

**CSS Code:**

    #nav
    {
    	right:2%;
    	list-style:none;
    	position:fixed;
    	/* float:right; */
    	top:30px;
    	z-index:1000;
    	/* width:520px; */
    }
    
    #nav > li {
        display: inline-block;
        /* dirty hack for IE7 */
        *display: inline;
        *zoom: 1;
    }
    
    #nav a
    {
    	float:left;
    	top:30px;
    	display:inline-block;
    	font-size:11px;
    	margin-left:5px;
    	margin-right:5px;
    	padding-left:10px;
    	padding-right:10px;
    	text-decoration:none;
    	height:24px;
    	color:#666;
    	line-height:24px;
    	text-align:center;
    	box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    	background:rgba(255,255,255,0.9);
    	text-transform:uppercase;
    }
    
    #nav a:hover
    {
    	background:#dedede;
    }
    
    #nav .current a
    {
    	background:#666;
    	color:#ededed;