Question

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? Site link http://goo.gl/nEx5e
Thanks

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;

Answer 1

Before you read my answer, you should consider that people will be less likely to answer your questions if you don’t accept answers on the questions you post. This is generally considered rude.

Now… the problem is that you are using RGBA with transparency on the white button background.

IE8 and below can’t handle transparent colors like that. You’ll need to manually set transparency with opacity: 0.x and filter: Alpha(opacity='xx').

Note that opacity: 0.8 is equal to filter: Alpha(opacity=80).

#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: white;           // <------ !
    opacity: 0.8;                // <------ !
    filter: Alpha(opacity='80'); // <------ !
    text-transform:uppercase;
}