CODEWITHSUNDEEP
cssinternet-explorer-9
Sledge81
Sledge81

Reputation: 41

Why isn't my div background gradient working in IE9

i've been breaking my head on how to get a background for a DIV to work using the background-gradient for IE9. Funny thing is, rest of the DIV's display gradients except this one.

The code i'm using is:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA')

To get a better understanding, I created a div class called leaderboard, which sits on the top right side of the screen, position is fixed.

The rest of the elements in the page having gradients are rendered correctly except this. Am i doing something wrong?

EDIT

This is how my #respond looks like (which works absolutely fine)

#respond {
    -moz-box-shadow: 0 0 1px #CCCCCC;
    -webkit-box-shadow: 0 0 1px #CCCCCC;
    border-top: 1px solid #ECEDE8;
    float: left;
    margin-left: 10px;
    width: 370px;
    margin-bottom: 15px;
    background: -moz-linear-gradient(center bottom , #E8E8E8 0%, #F2F2F1 50%) repeat scroll 0 0 #F5F5F4;
    background: -webkit-gradient(linear, left top, left bottom, from(#E8E8E8), to(#f2F2F1)); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8', endColorstr='#F2F2F1'); /* for IE */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8', endColorstr='#F2F2F1'); /* for IE */

}

This is how the .leaderboard looks like

.leaderboard {
    border: 1px solid #5D9ABA;
    -moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    margin: 375px auto;
    background: -moz-linear-gradient(center bottom , #388EBB 0%, #5D9ABA 50%) repeat scroll 0 0 #5D9ABA;
    background: -webkit-gradient(linear, left top, left bottom, from(#388EBB), to(#5D9ABA));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */
    text-color: #EFEFEF;
    -moz-box-shadow: -2px 2px 5px 0px #CCCCCC;
    -webkit-box-shadow: -2px 2px 5px 0px #CCCCCC;
    box-shadow: -2px 2px 5px 0px #CCCCCC;
}

Upvotes: 4

Views: 22644

Answers (3)

curriegrr
curriegrr

Reputation: 586

IE uses #AARRGGBB format, a 8 digit number. The colors he used are only 6 digits.

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */

ref:

http://msdn.microsoft.com/en-us/library/ms532930%28v=vs.85%29.aspx

Upvotes: 2

user596149
user596149

Reputation:

This works (note my comments for cross-browser support!):

HTML

<a class="gradient border-radius multiple-background" href="#">Anchor</a>
<div class="gradient border-radius multiple-background">Div</div>

CSS

a {
display:inline-block; /* NB ie7 ele requires display:block or display:inline-block for gradient to work on anchors */
}

a,
div {
min-height:1%; /* NB ie7 ele requires haslayout for gradient to work */
}

.gradient{
background: #f8cbd6; /* Old browsers */
background: -moz-linear-gradient(top, #f8cbd6 0%, #edeeec 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8cbd6), color-stop(100%,#edeeec)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* Opera11.10+ */
/* background: -ms-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8cbd6', endColorstr='#edeeec',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* W3C */
}
/* NOSUPPORT ie7-9 for gradient AND border-radius (border-radius only supported in ie9 anyway) */

PS if you're aiming to combine border-radius, gradients, and multiple background-images (in latest builds as of 03/08/2011) in IE7-9 good luck is all I can say (just spent 5hrs experimenting and documenting use cases!).

I'm about to publish my findings - which are outside the scope of this question - but if anyone reading this needs them drop me a DM/email ([email protected]).

Best,

Upvotes: 15

robertc
robertc

Reputation: 75777

Have you tried:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA')"; /* for IE */

The quotes are necessary. Also for things to work in all versions of IE, you need to put the -ms-filter before the filter.

Upvotes: 5

Related Questions