CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Chapsterj
Chapsterj

Reputation: 6625

Bootstrap css in IE

I'm using some of the bootstrap components in particular the button group. I want to be able to add gradients to IE. When I view it in IE8 it degrades to a solid background. I tried to set a style for IE

Right now .btn class is using this setup to color the background gradients.

  background-color: #F5F5F5;
  background-image: -moz-linear-gradient(center top , #FFFFFF, #E6E6E6);

Here is what I'm adding for IE but it doesn't seem to do anything.

.btn{
background: linear-gradient(to bottom, #ffffff 0%,#e6e6e6 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 );
}

Upvotes: 0

Views: 746

Answers (4)

Chapsterj
Chapsterj

Reputation: 6625

Ok the issue was I was loading the IE stylesheet first and background-color in the bootstrap.css was overriding it. Thanks for all the suggestions from everyone.

Upvotes: 0

Pekka
Pekka

Reputation: 449395

Peeking in the manual, the colorstr arguments seem to expect AARRGGBB notation.

Color is expressed in #AARRGGBB format, where AA is the alpha hexadecimal value, RR is the red hexadecimal value, GG is the green hexadecimal value, and BB is the blue hexadecimal value. The alpha value controls the opacity of the object. An alpha value of 00 is transparent, while a value of FF is opaque.

So try

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffffff',
endColorstr='#ffe6e6e6',GradientType=0 );

Upvotes: 1

Andy
Andy

Reputation: 131

While you can use the filter, if there's a solid background, IE will use that instead. (ok technically not instead, but the effect is the same)

So, try removing the background-color and see if that works.

Upvotes: 0

SH56
SH56

Reputation: 93

You could always try overlaying a transparent png, but note that it doesn't work in IE6.

Upvotes: 0

Related Questions