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

[Darin McGrew]

I recommend that you start by fixing the markup and CSS errors reported by the online tools:
http://validator.w3.org/check?uri=http%3A%...ine&group=0
http://jigsaw.w3.org/css-validator/validat...ng=&lang=en

[Frederiek]

And use http://css3generator.com/ to create the appropriate code for background-gradients (or other CSS3) for different browsers, as yours is Firefox only.

[scott g]

Thanks for the help guys. I guess I'm still kind of at a loss... I'm not sure how to incorporate the new CSS into the existing style sheet..?

CODE

background: -moz-linear-gradient(top, rgba(88,156,220,1) 0%, rgba(87,87,87,1) 99%, rgba(87,87,87,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(88,156,220,1)), color-stop(99%,rgba(87,87,87,1)), color-stop(100%,rgba(87,87,87,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(88,156,220,1) 0%,rgba(87,87,87,1) 99%,rgba(87,87,87,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(88,156,220,1) 0%,rgba(87,87,87,1) 99%,rgba(87,87,87,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(88,156,220,1) 0%,rgba(87,87,87,1) 99%,rgba(87,87,87,0) 100%); /* IE10+ */
background: linear-gradient(top, rgba(88,156,220,1) 0%,rgba(87,87,87,1) 99%,rgba(87,87,87,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#589cdc', endColorstr='#00575757',GradientType=0 ); /* IE6-9 */

Thanks,

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.