469,300 Members | 2,175 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,300 developers. It's quick & easy.

how to allow IE browsers to see linear gradients

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');}
this is the furthest i have got i would appriciate any help that you could possibly give me.
Jul 2 '11 #1
2 2398
ilya Kraft
134 100+
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));
  3. background:-moz-linear-gradient(top,  #f6f6f6,  #e2e2e2);
  4.           filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#e2e2e2');
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]--> 
Jul 19 '11 #2
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]-->  
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.

Similar topics

8 posts views Thread by Scott David Daniels | last post: by
3 posts views Thread by Kerberos | last post: by
12 posts views Thread by confused | last post: by
12 posts views Thread by code_wrong | last post: by
8 posts views Thread by Warren Sarle | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.