CODEWITHSUNDEEP
htmlcssinternet-explorer
Brack
Brack

Reputation: 333

How to stop HTML elements from inheriting backgrounds in IE

I'm having trouble getting IE to not display a background of a child element when the parent has a background applied with a filter. I'm pretty new to using filters in CSS for IE. Here's a pseudo code example. HTML:

<ul>
    <li>Item With Background</li>
    <ul>
        <li>Item Without Background</li>
    </ul>
</ul>

CSS:

ul li {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
}
ul ul {
    background: none;
}
ul ul li {
    background: none;
}

In this case, the child li element is inheriting the background filter from the parent. I can't seem to get the background to disappear. Do I maybe need to set the filter to something like none or transparent?

Upvotes: 3

Views: 438

Answers (1)

Kevin Ji
Kevin Ji

Reputation: 10499

Try overriding the filter:

ul ul {
    background: none;
    filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" !important;
}
ul ul li {
    background: none;
    filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)" !important;
}

Upvotes: 2

Related Questions