My horizontal menu appears distorted on IE8 (and possibly older versions) as shown in the first image. However, there are no issues with the latest versions of Safari, Firefox, and Chrome as depicted in the second image. Any suggestions on why this is happening and how it can be fixed? You can view the site here. Thank you!
This is the 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;