Strange Safari CSS Error with CSS Gradients

Question

Hello,

I added a CSS gradient to this button, but it seems like a strange line appears. Is there any way to fix this?

CSS:

#view-content .billing-form #submit { background: #94c723; /* Old browsers */ background: -moz-linear-gradient(top, #94c723 0%, #6cb119 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94c723), color-stop(100%,#6cb119)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #94c723 0%,#6cb119 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #94c723 0%,#6cb119 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #94c723 0%,#6cb119 100%); /* IE10+ */ background: linear-gradient(to bottom, #94c723 0%,#6cb119 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c723', endColorstr='#6cb119',GradientType=0 ); /* IE6-9 */ border: none; border-top: 1px solid #a1d61a; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #FFFFFF; font-size: 18px; line-height: 40px; padding: 0 70px; font-weight: bold; font-family: Arial, sans-serif; } 

Answer 1

Just think, but why not do a gradient overlay on pixlr and just set it as a background image. Then you no longer have this problem, and you save about ten lines of code.

Answer 2

Try the following:

 #view-content .billing-form #submit { background: #94c723; /* Old browsers */ background: -moz-linear-gradient(top, #94c723 0%, #6cb119 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94c723), color-stop(100%,#6cb119)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #94c723 0%,#6cb119 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #94c723 0%,#6cb119 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #94c723 0%,#6cb119 100%); /* IE10+ */ background: linear-gradient(to bottom, #94c723 0%,#6cb119 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c723', endColorstr='#6cb119',GradientType=0 ); /* IE6-9 */ border: none; border-top: 1px solid #a1d61a; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #FFFFFF; font-size: 18px; line-height: 40px; padding: 0 70px; font-weight: bold; font-family: Arial, sans-serif; display: block; outline: none; }