Skip navigation
Currently Being Moderated

Linear Gradients CSS Formatting

May 19, 2012 8:16 AM

I just starting to use linear gradients. From what I see, using them means also adding extra formatting to accommodate different browsers. How does a person convert from one format to another? If you look at my sample page in Safari and FireFox, you will see the linear gradient does not render in FireFox. How do I convert the CSS property that works Safari so it also works in FireFox? I realize I have to have both properties included in the rule.

 

http://www.kiefferfurniture.com/testcss.html

 
Replies
  • Currently Being Moderated
    May 19, 2012 8:55 AM   in reply to kcfi

    Use this on-line gradient generator. 

    http://www.colorzilla.com/gradient-editor/

     

    It will generate the code you need for various browsers (mozilla, webkit, opera, msie and filters for older IE).

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2012 9:01 AM   in reply to kcfi

    When working with browser specific  CSS, you have to do it in code view. 

     

    Technically speaking, browser specific CSS isn't valid code so it won't show in the CSS Panel.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2012 9:35 AM   in reply to kcfi

    You can delete it and use Ctl+Z to undo delete.  That's about it. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2012 11:42 AM   in reply to kcfi

    Post the URL to your test page.   It could be caused by an extra semi-colon but I can't tell without seeing everything.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 20, 2012 12:13 PM   in reply to kcfi

    IE filters  do not support multiple start and stop colors.  You have the same hex #color in startColor and endColor.  That's why you don't see a gradient in IE9. 

     

    Change this:

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66a7c5', endColorstr='#66a7c5',GradientType=0 ); /* IE6-9 */

     

    To this:

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66a7c5', endColorstr='#92C3DA',GradientType=0 )

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points