Gradients and IE9 and <

HTML & CSS
1

Hi,

I’m just trying to get the following to work in IE 9 and lower:

.widget-title, .modal-header, .table th, div.dataTables_wrapper .ui-widget-header {
	background-color:  #efefef;
	background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#fdfdfd), to(#eaeaea));
	background-image: -webkit-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    background-image: -moz-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    background-image: -ms-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    background-image: -o-linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
    background-image: -linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
[B]    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */[/B]
    border-bottom: 1px solid #CDCDCD;
    height: 36px;
}

I’m aware that gradients dont work correctly in very old versions of IE (but our site is really designed with IE8+):

Can anyone shed any light on why the “headers” of those boxes show up orange in IE10, FF, Chrome, Safari etc… yet in IE 9 they come up as a grey?

TIA!

Andy

2

No one? Got the same problem on another site now - I’d really like to get this going :confused:

damn IE!!!

3

Hi.

I’ve only had a quick look but it seems to me you are not getting any gradient on the titles at all in browsers other than IE because you over-write it with this rule here that follows the rules you showed above.


.widget-title {
	overflow: hidden;
    color: #F5F7F7;
	text-shadow: 0 1px 0 #000;
	[B]background: #C46328; [/B]
	font-size: 1.3em;
}

linear gradients are supplied via the background-image property and you are setting them to none and just giving them an orange colour (#C46328). Therefore all browsers (except ie9 and under) just get orange.

IE9 (and under) on the other hand are getting this rule:


filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */

Which is not cancelled out as the filter takes over the background as a whole and background colours are ignored. The gradient you are using is lighter gray to light gray so all you see is gray. So in fact IE9 and under are the only ones showing a linear gradient at all.

If you want a gradient in IE9 then supply the values in the filter as required. Maybe something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.test1, .test2 {
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#C46328', GradientType=0 ); /* IE6-9 */
	width:200px;
	height:100px;
}
</style>
</head>

<body>
<div class="test1">test1</div>
</body>
</html>

However if you just want the page to look like others then remove the filter completely and let the same background show through that other browsers are getting.:slight_smile:

4

Hi,

Ah man, now I feel stupid - especially seeing as that class was right below the one I was looking at :slight_smile: Commenting that out, and changing the filter colors means it now works all the way back to 8 (which is old enough for me, as thats what the design is coded to work back to <G>)

Thanks a ton!

Andy