Question

I have recently created a new dropdown menu for an existing website purely with CSS. It works fine functionally, the only thing is that the background colour of the dropdown menu doesn’t show in Internet Explorer. It just appears white on internet explorer when it should be a gradient of two blended colours and a different orange colour when hovered over. I can’t work out why this is or where the problem could be.

Here’s the CSS:

CSS

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
height: 24px;
width: 904px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

.menu ul{
background-color:#ffffff;
height:35px;
list-style:none;
margin:0px auto;
padding:0;
}

.menu li{
    float:left;
    padding:0px;
    margin: 0px 10px;
    }

.menu li a{
background:#ffffff;
color:#333;
display:block;
font-weight: 500;
line-height:20px;
margin:0px;
padding:0px 40px;
text-align:center;
text-decoration:none;
border: 1px #FFF solid;
    }

    .menu li a:hover, .menu ul li:hover a{
color:#000;
text-decoration:none;
border: 1px #666666 solid;
        }

.menu li ul{
    background-color:#ffffff;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }

.menu li:hover ul{
    display:block;

    }
.menu li li {
    background:bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:220px;
    }

.menu li:hover li a{

    }

.menu li ul a{
    display:block;
    height:24px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fae4bd), color-stop(1, #eac380) );
    background:-moz-linear-gradient( center top, #fae4bd 5%, #eac380 100% );
    } 

    .menu li ul a:hover, .menu li ul li:hover a{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FC6), color-stop(1, #F93) );
background:-moz-linear-gradient( center top, #F93 5%, #F90 100% ); 
border:1px solid #333;
color:#ffffff;
text-decoration: none;
        }

.menu p{
    clear:left;}

HTML

<div class="menu">
<ul>
    <li><a href="index.html" target="_self" >HOME</a></li>
    <li><a href="" target="_self" >CLIENT SECTION</a>
        <ul>
        <li><a href="clientsinformation.htm" target="_self">CLIENT INFORMATION</a></li>
        <li><a href="temporarystaff.htm" target="_self">TEMPORARY STAFF</a></li>
        <li><a href="permanentstaff.htm" target="_self">PERMANENT STAFF</a></li>
        </ul>
    </li>
    <li><a href="" target="_self" >APPLICATIONS</a>
        <ul>
        <li><a href="applicantinfo.htm" target="_self">APPLICANT INFORMATION</a></li>
        <li><a href="interviewtechniques.htm" target="_self">INTERVIEW TECHNIQUES</a></li>
        <li><a href="cvtips.htm" target="_self">CV TIPS</a>
        </ul>
    </li>
    <li><a href="praca.htm" target="_self" >WHY US?</a></li>
    <li><a href="contact.htm" target="_self" >CONTACT US</a></li>
</ul>

I bet this is probably small and obvious, but any help would be greatly appreciated. Many thanks.

Answer 1

Internet explorer does not support CSS3 gradients. Instead you have to use IEs proprietary and awful filter.

.menu li ul a {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fae4bd), color-stop(1, #eac380) );
    background:-moz-linear-gradient( center top, #fae4bd 5%, #eac380 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fae4bd', endColorstr='#eac380'); /* for IE */
} 

The 5% to 100% opacity gradient you have applied there cannot be replicated in IE – at least not by using only the gradient filter.