Support » Themes and Templates » CSS for crossbrowser compatibility

  • Resolved Franz92

    (@franz92)


    Hello folks!
    I am currently doing a project for a local.

    Above you can see how it looks right now, but I want to have it look like that.

    This is the CSS I am using for the main nav bar (developing on firefox):

    #branding #access, #colophon #access-footer {
        background: linear-gradient(rgb(81, 104, 62), rgb(47, 68, 25)) repeat scroll 0% 0% transparent !important;
        clear: both;
        display: block;
        float: left;
        margin: 0px auto 2px;
        width: 100%;
    }

    And this is the one for the titles of the sidebar:

    .widget-title {
        color: rgb(245, 245, 245);
        background: linear-gradient(rgb(81, 104, 62), rgb(47, 68, 25)) repeat scroll 0% 0% transparent !important;
    }

    How can I get it to work? Thanks in advance!

    Also I would like to support the community (took out the footer text) – what’s the best way?

Viewing 5 replies - 1 through 5 (of 5 total)
  • What’s not working — looks like it is to me. Try clearing your browser cache?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You’re missing a lot of CSS, you need something like,

    background: #51683e; /* Old browsers */
    background: -moz-linear-gradient(top,  #51683e 0%, #2f4419 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#51683e), color-stop(100%,#2f4419)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #51683e 0%,#2f4419 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #51683e 0%,#2f4419 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #51683e 0%,#2f4419 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #51683e 0%,#2f4419 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51683e', endColorstr='#2f4419',GradientType=0 ); /* IE6-9 */

    Try adding that.

    Thread Starter Franz92

    (@franz92)

    WPyogi – thank you for your response!

    Andrew Nevins – thank you very much, it worked like a charm! I guess I missed the CSS for the specific user agents? Thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes it is for each browser.
    This tool generates it for you, if you use that. That’s what I used to get the code in my post.

    Thread Starter Franz92

    (@franz92)

    Wow, great! Have many thanks and a wonderful life 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS for crossbrowser compatibility’ is closed to new replies.