how to allow IE browsers to see linear gradients

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • MusoFreak200
    New Member
    • Oct 2009
    • 96
    #1

    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:
    Code:
    #rightsidegradientbar 
{
    width:50px;
background-image: -webkit-gradient(
    linear,
    right bottom,
    left bottom,
    color-stop(0.1, #FFFFFF),
    color-stop(0.78, #00CCCC),
    color-stop(1, #00CCCC)
);
background-image: -moz-linear-gradient(
    right center,
    #FFFFFF 10%,
    #00CCCC 78%,
    #00CCCC 100%
);
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.
    Tags: background, display, gradient, internet explorer, linear
    • ilya Kraft
      New Member
      • Jan 2011
      • 134
      #2
      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).

      Code:
      background:-webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e2e2e2));

background:-moz-linear-gradient(top,  #f6f6f6,  #e2e2e2);
		  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:

      Code:
      <!--[if IE 7 ]> [U]Define path to stylesheet here[/U] <![endif]--> 
<!--[if IE 8 ]> [U]Define path to stylesheet here[/U] <![endif]-->

        Comment

        • MusoFreak200
          New Member
          • Oct 2009
          • 96
          #3
          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:

          Code:
          <!--[if IE 7 ]> Define path to stylesheet here <![endif]-->  
<!--[if IE 8 ]> Define path to stylesheet here <![endif]-->
          that you have given me

            Comment

            Previous template Next
            Working...