CSS Background Not Working in Chrome

  • Resolved Tripologist

    (@tripologist)


    12 years, 3 months ago

    I’m trying to customize your plugin, but am having some issues getting the background color to work, especially in Chrome.

    Here’s the CSS code I’m using: 

    .mc4wp-form {
    border: 1px solid #e6dc25;
    border-radius: 10px;
    padding: 20px 20px 50px;
    background:#4060AD;
}

    If I add “!important” after the background hex code, I can make the background color show up in Safari and Firefox, but even that doesn’t make it work in Chrome.

    Interestingly though, in Chrome, it gives me the correct border size and shape, but in the blue color that’s supposed to be used for the background color. The background just appears white in Chrome.

    Even more interestingly, I defined the background of the submit button in the same way, and that works in Chrome if I add “!important”.

    If you would like to see it in action, you can visit this page: http://upatest.uncoveringpa.com/visiting-seminary-ridge-museum

    Thanks for any help you can be.

    http://wordpress.org/plugins/mailchimp-for-wp/

Viewing 1 replies (of 1 total)
  • Plugin Author Danny van Kooten

    (@dvankooten)

    12 years, 3 months ago

    Hi there,

    This has to do with the importance of the various CSS rules applied to your form and its buttons (from your theme and other stylesheets).

    From the looks of it you have already figured it out. You can make your CSS rules “more important” by using a more specific selector. Something like this should do, in your case.

    #mc4wp_widget-2 .mc4wp-form {
    border: 1px solid #e6dc25;
    border-radius: 10px;
    padding: 20px 20px 50px;
    background:#4060AD;
}

    Hope that helps!

Viewing 1 replies (of 1 total)

The topic ‘CSS Background Not Working in Chrome’ is closed to new replies.