Jump to content
Sign in to follow this  
laurenp

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

Recommended Posts

laurenp    0
laurenp

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
laurenp    0
laurenp

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

That worked for me in Firebug.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
laurenp    0
laurenp

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
stephwise    0
stephwise

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
Danny    1,327
Danny

Hi,

 

Can you create your own topic please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×