Jump to content


Photo
- - - - -

Button colour in Chrome vs Firefox

colour css browsers

Best Answer greenfly , 25 September 2013 - 12:05 PM

So the Gradient in firefox is coming from the following 

 

.btn-primary {

    background-image: -moz-linear-gradient(center top , #1780FF, #006BED);}

 

-moz is the indicator that your css are telling firefox which style to use 

 

try adding the following 

 

   background-image-moz-linear-gradient(center top , #7c7a7d, #7c7a7d);

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 microsqueek

microsqueek

    Advanced Member

  • Members

  • 30 posts
  • Country: Country Flag

Posted 25 September 2013 - 05:20 AM

Hey, I've changed a colour of a button - the iCallout button, Join our mailing list, in the bottom right - from blue to grey in the CSS customisations. It shows up in grey in Chrome and Safari, but it's blue in Firefox. Any idea how to make sure it's always grey in any browser?

 

Site: http://nationalmallunderground.org

 

Code:

 
.icallout-action.btn.btn-primary.btn-large { 
  background-color: #7c7a7d;
  background-image: -webkit-linear-gradient(top,#7c7a7d,#7c7a7d); }

.section-icallout .format-inline .icallout-head { 
  background-color: #7c7a7d;
  background-image: -webkit-linear-gradient(top,#7c7a7d,#7c7a7d); }


#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 25 September 2013 - 12:05 PM   Best Answer

So the Gradient in firefox is coming from the following 

 

.btn-primary {

    background-image: -moz-linear-gradient(center top , #1780FF, #006BED);}

 

-moz is the indicator that your css are telling firefox which style to use 

 

try adding the following 

 

   background-image-moz-linear-gradient(center top , #7c7a7d, #7c7a7d);


  • batman and microsqueek like this

#3 microsqueek

microsqueek

    Advanced Member

  • Members

  • 30 posts
  • Country: Country Flag

Posted 26 September 2013 - 05:24 AM

Great, thanks!



#4 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 26 September 2013 - 12:23 PM

No Problem - glad it helped. 



#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 15242 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 27 September 2013 - 08:22 AM

Also please be aware that your code with the -moz added will then only work in FireFox and Webkit browsers i.e Chrome and Safari. If you want your gradient to be visible in all browsers you will need to generate the correct code, see here for assistance. http://www.colorzill...radient-editor/





Also tagged with one or more of these keywords: colour, css, browsers