WordPress.org

Forums

[resolved] Buttons correctly coloured in firefox but different in chrome and safari. (3 posts)

  1. Perfect Circle
    Member
    Posted 2 years ago #

    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 essentialopals.com if you want to debug.

    Anyone have an idea what is causing this?

  2. Timothy Jacobs
    Member
    Posted 2 years ago #

    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.

  3. Perfect Circle
    Member
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic