Archived

This topic is now archived and is closed to further replies.

  • 0

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

Question

Posted · Report post

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) button.gif 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!

Share this post


Link to post
Share on other sites

8 answers to this question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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);
	}
	

Share this post


Link to post
Share on other sites

Posted · Report post

That worked for me in Firebug.

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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).

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

Can you create your own topic please.

Share this post


Link to post
Share on other sites