Jump to content


Photo
- - - - -

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


  • Please log in to reply
8 replies to this topic

#1 laurenp

laurenp

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 05 July 2012 - 12:41 AM

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)
Posted Image

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!

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 05 July 2012 - 02:22 AM

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.

#3 laurenp

laurenp

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 05 July 2012 - 02:51 AM

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

Please Login or Register to see this Hidden Content



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 05 July 2012 - 03:00 AM

Try this:

Please Login or Register to see this Hidden Content



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 05 July 2012 - 03:01 AM

That worked for me in Firebug.

#6 laurenp

laurenp

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 05 July 2012 - 03:16 AM

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!

#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 15047 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 July 2012 - 08:30 AM

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.

#8 stephwise

stephwise

    Advanced Member

  • Members
  • 74 posts
  • Country: Country Flag

Posted 10 December 2012 - 04:52 AM

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



#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 15047 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 December 2012 - 10:22 AM

Hi,

 

Can you create your own topic please.