Skip navigation
kcfi
kcfi
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

940 Views   10 Replies   Latest reply: Nancy O., May 20, 2012 12:13 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    May 19, 2012 8:55 AM   in reply to kcfi
    Report

    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:
  • kcfi
    Currently Being Moderated
    2. kcfi,
    May 19, 2012 9:56 AM   in reply to Nancy O.
    Report

    Thanks Nancy.

     
    |
    Mark as:
  • kcfi
    Currently Being Moderated
    3. kcfi,
    May 20, 2012 7:18 AM   in reply to Nancy O.
    Report

    I used the Colorzilla code generator and it works fine. I pasted the code into my page. The individual background settings do not appear in my rules/properties (see the attached screen shot). How would I get them to appear there? Do I have to manually enter each one, or is there a simpler way?

    Screen Shot 2012-05-20 at 9.14.13 AM.jpg

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    May 20, 2012 9:01 AM   in reply to kcfi
    Report

    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:
  • kcfi
    Currently Being Moderated
    5. kcfi,
    May 20, 2012 9:22 AM   in reply to Nancy O.
    Report

    Nancy,

    Is there a way to disable code in code view other than commenting it out?

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    May 20, 2012 9:35 AM   in reply to kcfi
    Report

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

     

     

    Nancy O.

     
    |
    Mark as:
  • kcfi
    Currently Being Moderated
    7. kcfi,
    May 20, 2012 11:00 AM   in reply to Nancy O.
    Report

    I tested the Colorzilla code on IE9 Windows and it does not render as a gradient. What is wrong? Here's the code it wrote:

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

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    8. Nancy O.,
    May 20, 2012 11:42 AM   in reply to kcfi
    Report

    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:
  • kcfi
    Currently Being Moderated
    9. kcfi,
    May 20, 2012 11:55 AM   in reply to Nancy O.
    Report

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

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    10. Nancy O.,
    May 20, 2012 12:13 PM   in reply to kcfi
    Report

    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:
Actions

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