I'm using JQuery UI's default theme (sunny, if that matters) through Google CDN. I want to replace the default background for ui-widget-header with a CSS background gradient. This is my sample usage:-

<h3 class="ui-widget-header">Some Title</h3>

My CSS looks like this:-

.ui-widget-header {
    background: #003366; /* default */
    background: -moz-linear-gradient(top center, #FFFFFF, #003366);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.00, #003366));
    background: -ms-linear-gradient(top center, #FFFFFF, #003366);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#003366'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#003366')"; /* IE8 */
}

This works for Firefox and Safari, but IE 8 is picking up the default background and the filter doesn't do anything.

How do I fix this?

There's an issue with IE7/8 that they don't set the gradient background if the element doesn't have height defined (hasLayout).

Try adding zoom: 1. If it doesn't work, you'll probably have to set a height, so try height: 100%.

more