Question

I have an inconsistency issue with the IE and FireFox design.

The issue is with the “li” gradient background. The code is working fine for Firefox as is desired, but not for IE. I will try to explain what I am trying to do via a code:

<li class="is-active">
    <ul>
        <li></li>
        <li class="is-active"></li>
        <li></li>
    </ul>
</li>

//For FireFox
li.is-active {
    background: -moz-linear-gradient(50% 0 , #E8E9E9, #FFFFFF 40px) repeat scroll 0 0 transparent;
    border-bottom: 1px solid #E0E0E0;
}
li li.is-active {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 0 none;
}

//For Internet Explorer
li.is-active {
    filter progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e8e9e9', endColorstr='#ffffff'); BACKGROUND-COLOR: #fff; _zoom: 1;
    border-bottom: #e0e0e0 1px solid;
}
li li.is-active {
    background: none transparent scroll repeat 0% 0%;
    border-bottom: 0px;
}

In this the li li.is-active for IE is not working. Instead of li li.is-active, the li.is-active gets implemented on it also.

Which is not desired.

I hope I was able to explain my issue.

Please let me know of any suggestions which would help me fix this issue.

Thanks you in advance.

Zeeshan

Answer 1

try this one

li li.is-active {
    background: none transparent scroll repeat 0% 0%;
    filter: none;
    border-bottom: 0px;
}

hope it will solve your issue