CSS for crossbrowser compatibility

  • Resolved Franz92

    (@franz92)


    12 years, 4 months 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?

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.