CODEWITHSUNDEEP
css
santa
santa

Reputation: 12512

Adding gradient to element breaks CSS functionality in IE

I am working on a CSS-based drop-down menu. It works fine until I add gradient to elements. Than something breaks in IE and when I hover over <li> items in sub-menu the menu box disappears.

Here's the code I use to add gradient and make it cross-browser compatible:

background-color: #c1ddf4; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c1ddf4', endColorstr='#ffffff', GradientType=0); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c1ddf4), color-stop(100%, #ffffff));/* for webkit browsers */
background: -moz-linear-gradient(top, #c1ddf4, #ffffff); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#c1ddf4, #ffffff);

Please see the following examples:

OK (without gradient) vs. NOT OK (with gradient)

Upvotes: 0

Views: 522

Answers (1)

chipcullen
chipcullen

Reputation: 6960

The IE filter will break certain functionality when applied to elements. My suggestion is to use a horizontally tiled gradient image for IE, either by using a CSS hack, an IE-only style sheet, or targeting it using Modernizr.js.

The truly proper way would be to use Modernizr, then write this CSS:

.no-cssgradients li {
     background: url(gradient.png) repeat-y;
}

That way, any browser that doesn't support CSS gradients (not just IE) will get served the image instead.

Upvotes: 1

Related Questions