CODEWITHSUNDEEP
cssinternet-explorerfirefox
user3371271
user3371271

Reputation: 21

Why is this css not working in firefox and ie11?

I am trying to change the button color in woocommerce with this:

#top .button, #top .submitbutton {
text-shadow: none!important; 
color: white!important;
font-weight: bold; !important; 
background: -webkit-gradient(linear, left top, left bottom, from(#6FB56F),        to(#0D850D))!important;

It works fine in chrome but does not work in ie11 and firefox. All answers are greatly appreciated

Upvotes: 1

Views: 110

Answers (4)

fzzle
fzzle

Reputation: 1494

  background-image: -webkit-linear-gradient(); /* Chrome and Safari */
  background-image:    -moz-linear-gradient(); /* Old Firefox (3.6 to 15) */
  background-image:     -ms-linear-gradient(); /* Pre-releases of IE 10 */
  background-image:      -o-linear-gradient(); /* Old Opera (11.1 to 12.0) */ 
  background-image:         linear-gradient(); /* Standard syntax; Works best if last */

Upvotes: 1

rolory
rolory

Reputation: 362

-webkit works only for Safari/Chrome/Opera.
For appropriate to Firefox, use -moz and for IE9 use -ms.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

The correct way to do a gradient is:

background-image: linear-gradient(to bottom, #5FB56F, #0D850D);

Upvotes: 2

Pete
Pete

Reputation: 3254

If it is only the background that isn't working you need to define the web browser specific gradients:

i.e. As an example:

#grad
{
  background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, blue); /* Standard syntax */
}

Would allow for the gradients to work on those browsers.

See here for details

Upvotes: 2

Related Questions