Problems With CSS Gradient

Discussion in 'Programming' started by theolonious, May 10, 2012.

to remove all ads.
  1. theolonious

    theolonious New Member

    Messages:
    1
    Hello, I'm Theo, owner of DollarTechCheck.

    I'm using a CSS Gradient in the title bar of my website, and it looks fantastic in chrome. For whatever reason, it comes out horribly in Firefox. If you could take a look, it would be fantastic

    DollarTechCheck.com

    The code is below:

    background-image: linear-gradient(bottom, rgb(122,122,122) 81%, rgb(173,173,173) 15%, rgb(133,133,133) 100%);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-image: -o-linear-gradient(bottom, rgb(122,122,122) 81%, rgb(173,173,173) 15%, rgb(133,133,133) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(122,122,122) 81%, rgb(173,173,173) 15%, rgb(133,133,133) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(122,122,122) 81%, rgb(173,173,173) 15%, rgb(133,133,133) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(122,122,122) 81%, rgb(173,173,173) 15%, rgb(133,133,133) 100%);

    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.81, rgb(122,122,122)),
    color-stop(0.15, rgb(173,173,173)),
    color-stop(1, rgb(133,133,133))
    );
     
  2. Nate55

    Nate55 New Member

    Messages:
    11
    I've had similar problems with gradients. In the end I decided to just use an image instead. I created a 1 pixel wide image in Photoshop with the gradient I wanted and just repeated o the x-axis for the header (this way obviosuly the image is only a tiny file size)
     

Share This Page