Why are my Submit Button CSS overides not working in IE or Chrome?

[laurenp 0]

Hi There, I have used the following CSS to override the default pagelne buttons style. It works fine in Firefox but in IE and Chrome the background colour doesn't show and I just see the gradient. What am I missing? This pic shows what the button looks like in IE (top) and firefox (bottom) input[type="submit"], .submit, input[type="button"], .button, input[type="reset"], .reset { -moz-box-sizing: content-box; background: #D22328 !important; border:none !important; border-radius: 3px 3px 3px 3px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); color: #FFFFFF !important; cursor: pointer; padding: 4px 9px; text-decoration: none; text-shadow: none !important; text-transform: uppercase; font-size: 13px; font-weight: bold; } input[type="submit"]:hover, .submit:hover, input[type="button"]:hover, .button:hover, a.button:hover, input[type="reset"]:hover, .reset:hover { background: #b72525; } Cheers!

[Rob 547]

Lauren, this may or may not work, but worth a simple try. Change background: to background-color: and see if that works. Since the site isn't live, I can't test it for you.

[laurenp 0]

Thanks but it didn't work. Sorry. If you want to take a look with firebug then you can try this page (right down the bottom). http://tinyurl.com/7d7lrd6

[Rob 547]

Try this:

input[type="submit"], .submit, input[type="button"], .button, input[type="reset"], .reset {
	    background-color: -moz-linear-gradient(center top , #FFFFFF 0%, #DCDCDC 100%) repeat scroll 0 0 transparent;
	    border: 1px solid #BBBBBB;
	    color: #000000;
	    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	}
	

[Rob 547]

That worked for me in Firebug.

[laurenp 0]

Isn't that code to make it look like the top button? That's the one that isn't working - it should look like the bottom example - the solid red with no gradient. Cheers!

[Danny 1,327]

Hi LaurenP, I added your custom CSS and the button works for me in all browsers that I am able to test Chrome, Safari and FF. Unfortunately, I am unable to test IE correctly, therefore can you take a screenshot of the button in IE with the CSS that is loading using Internet Explorer's inspection tool please.

[stephwise 0]

Hey!  I'm having the same issue + was wondering if anyone ever found a solution.  My client uses IE so she keeps commenting on the submit buttons looking too grey (with the gradient).  Here is the website:

 

www.christinamillerdesigns.com

 

Also, I just started using browserstack today, but am not sure how to fix the problem. (at least i can see it now).

[Danny 1,327]

Hi,

 

Can you create your own topic please.