WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS for crossbrowser compatibility (6 posts)

  1. Franz92
    Member
    Posted 1 year ago #

    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?

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    What's not working -- looks like it is to me. Try clearing your browser cache?

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  4. Franz92
    Member
    Posted 1 year ago #

    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!

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  6. Franz92
    Member
    Posted 1 year ago #

    Wow, great! Have many thanks and a wonderful life :)

Topic Closed

This topic has been closed to new replies.

About this Topic