Support » Themes and Templates » Buttons correctly coloured in firefox but different in chrome and safari.

  • Resolved Perfect Circle


    I have a default template and have overrided the buttom colours with custom css in my child theme. The colours appear correct in firefox as per my overrides, but are retaining the default colours in safari and chrome.

    Chrome’s development tools shows the css from both my custom and the default css as struck out, but yet it is still reading the default.

    This is my custom css override:

    a.button {
        background-color: #0099CC;
        background-image: linear-gradient(to bottom, #0099CC, #006699);
        border: 1px solid #003366;
        text-shadow: 0 1px 0 #003366;

    I have changed other button attributes, such as size, box shadow, link colour, all of which are displaying fine. So it is not a specificity or syntax issue.

    The hover state for the checkout button – a background image – is displaying fine, but the background image ‘gradient’ is not displaying on other buttons.

    The default gradient displays fine, and the is no other css, such as a background image, that might be overriding it, so it is not a css compatibility issue that I can see.

    The only difference is that the custom colours are not being read. However according to Chrome’s development tools, the default is been overridden, but by what?

    I have looked at it on different computers too.

    Site is if you want to debug.

    Anyone have an idea what is causing this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Timothy Jacobs


    Check this out.

    CSS gradients are still in development so they have to prefixed with vendor specific prefixes. Opera is -o- safari and chrome are -webkit-, etc…

    Also you do not define the background under background-image, you cna write it just under background:. Use the link above to create your gradient and it will give you browser compliant code.

    Thanks heaps. That Gradient Generator is very helpful.

    FYI, I originally defined the gradient under background-image because it was defined that way in my parent theme, and it did work in firefox. Don’t know why they defined it that way. Anyway, it’s all working fine now. Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Buttons correctly coloured in firefox but different in chrome and safari.’ is closed to new replies.