By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,242 Members | 564 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,242 IT Pros & Developers. It's quick & easy.

how to allow IE browsers to see linear gradients

MusoFreak200
P: 96
i have been having a little bit of difficulty with getting IE browsers to show linear gradients.

this is the code that i have used so far:
Expand|Select|Wrap|Line Numbers
  1. #rightsidegradientbar 
  2. {
  3.     width:50px;
  4. background-image: -webkit-gradient(
  5.     linear,
  6.     right bottom,
  7.     left bottom,
  8.     color-stop(0.1, #FFFFFF),
  9.     color-stop(0.78, #00CCCC),
  10.     color-stop(1, #00CCCC)
  11. );
  12. background-image: -moz-linear-gradient(
  13.     right center,
  14.     #FFFFFF 10%,
  15.     #00CCCC 78%,
  16.     #00CCCC 100%
  17. );
  18. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#00CCCC');}
  19.  
  20.  
this is the furthest i have got i would appriciate any help that you could possibly give me.
Jul 2 '11 #1
Share this Question
Share on Google+
2 Replies

ilya Kraft
100+
P: 134
Browsers older IE9 would not probably show linear gradients. You would need to use background image for that.

If you want a working gradient that works in IE9 you should use this code, it works for me (it also works in other browsers like Mozilla and chrome).

Expand|Select|Wrap|Line Numbers
  1. background:-webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e2e2e2));
  2.  
  3. background:-moz-linear-gradient(top,  #f6f6f6,  #e2e2e2);
  4.           filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#e2e2e2');
  5.  
NOTE: I didn't use colors you did, so remember to change them.

If you want gradient in IE 8 and lower you should create another css style sheet for them and use background image and then in the <head> tags of your page use this:

Expand|Select|Wrap|Line Numbers
  1. <!--[if IE 7 ]> Define path to stylesheet here <![endif]--> 
  2. <!--[if IE 8 ]> Define path to stylesheet here <![endif]--> 
  3.  
Jul 19 '11 #2

MusoFreak200
P: 96
thank you so much mate i really do appreciate this, i have done what it is that i wanted already though

but i will need the:

Expand|Select|Wrap|Line Numbers
  1. <!--[if IE 7 ]> Define path to stylesheet here <![endif]-->  
  2. <!--[if IE 8 ]> Define path to stylesheet here <![endif]-->  
  3.  
that you have given me
Jul 20 '11 #3

Post your reply

Sign in to post your reply or Sign up for a free account.