HELP! Button background issue...?! I'm at a loss! Options

[scott g]

Ok... I need help

I'm self-taught so... That probably explains a lot but this community has been EXTREMELY helpful in the past so I have FAITH!

I'm having trouble getting my submit buttons and little comment icons to display the same in different browsers... The buttons and comment clouds look GREAT and EXACTLY how I want them to in FIREFOX. Screenshot below:

Firefox

However, in Internet Explorer & Safari this is how they look (no bueno):


IE

Safari

I can't for the life of me get them to display like they do in Firefox in other browser?!? Please anybody?! This is the code I have in my CSS that makes everything look fine in Firefox:

CODE

#advanced-search-form button.adv-button {
    background: -moz-linear-gradient(center top , #589CDC 0%, #575757 100%) repeat scroll 0 0 transparent;
    border: 1px solid #3F3F3F;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 1px rgba(0, 0, 0, 0.01);
    color: #FFFFFF !important;
    font-size: 1.385em;
    height: 36px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    width: 15.2%;
}

CODE

#filter-bar .button {
    background: -moz-linear-gradient(center top , #589CDC 0%, #575757 100%) repeat scroll 0 0 transparent;
    float: right;
    margin: 0;
    padding: 5px 13px 2px;
}

CODE

#connect .newsletter-form .submit {
    background: -moz-linear-gradient(center top , #589CDC 0%, #575757 100%) repeat scroll 0 0 transparent;
    border-radius: 3px 3px 3px 3px;
    cursor: pointer;
}

CODE

button.button, a.button, #wrapper a.comment-reply-link, #commentform #submit, #contact-page .submit { background: -moz-linear-gradient(center top , #589CDC 0%, #575757 100%) repeat scroll 0 0 transparent; !important; border-color: -moz-linear-gradient(center top , #589CDC 0%, #575757 100%) repeat scroll 0 0 transparent; !important; color: #FFFFFF !important; }
a.button:hover, a.button.hover, a.button.active, a.comment-reply-link:hover, #commentform #submit:hover, #contact-page .submit:hover { background: -moz-linear-gradient(center top , #589CDC 0%, #575757 100%) repeat scroll 0 0 transparent; !important; opacity: 0.9; }

Any help would be TREMENDOUSLY appreciated... I'm lost guys...

Oh, and the site is http://trizzat.com


---Thank You In Advance,


Scott G

[Frederiek]

Use it for the element you created the gradient for.

If, for instance, the RGBA colors of the new CSS code correspond to the colors you had for say #advanced-search-form button.adv-button, then apply the new declarations to that selector, by replacing "background: -moz-linear-gradient(center top , #589CDC 0%, #575757 100%) repeat scroll 0 0 transparent;" with the new CSS.