CSS3 Buttons working in Chrome but not Firefox

Hello,

I am working on a project and we have a bunch of buttons that are all using some common classes to make them look nice. This is a WordPress site using a child theme. I have overrode the button styles in my child theme and they look perfect in Chrome but not Firefox. Any ideas why? I can’t seem to find a logical reason as to what the heck is going on here.

http://dev.gallerysprout.com/signup/

Thanks.

I visited the site and don’t know what you are referring to. I’m using the most current version of Firefox. The “Free Trial” and “Monthly Subscription” buttons look fine. Rounded corners with a gradient. Could you hotlink in a screenshot of what the buttons are supposed to look like and what they look like in your version of Firefox?

By the way, the load time of that simple page was poor. Your page loading time is about 5 - 6 seconds right now, and it isn’t anywhere near peak time.

Sorry, should have included screen shots, because yes, the buttons are technically working properly in FireFox but they don’t look like I have them in Chrome and Safari. Please see attached screen shot to see what they look like in Chrome, more square and darker green, because of the style sheet override I have in my child theme, but for some reason not working in Firefox at all…thoughts?

Hi,

An error in your styles is causing Firefox to miss some styles out as it tries to recover from the fatal error.

In custom.css:


#tabs.gs-clean ul {
	border:none !important;
	background:none !important;
	border-bottom:1px solid #ccc !important;
	padding: .2em 1.2em 0 !important;
"
}


The quote mark at the end is causing the error so remove it and your buttons should work. This is why validation is important as these types of thing are hard to spot.

EXCELLENT! That fixed a whole bunch of stuff! Oh man, thank you sooooo much! Do you have a special tool you use to spot stuff like that? It was making me nuts! Thanks again!

If you want to validate your CSS code, you can do it here:

http://jigsaw.w3.org/css-validator/

Keep in mind that some vendor-specific CSS code (such as for shadows, etc.) will cause your CSS to be invalid. But that’s OK because what we are interested in isn’t the use of vendor-specific CSS, we are interested in other errors that will cause the CSS to not validate like the one which caused your problems.

Yes as Cheesedude said the first stop is the validator but just ignore css3 and vendor specific errors and just look for typos.

The way I spotted it first was to look in Chrome where you said it was working and using the webtools in chrome I could see that the styles were applied. The I looked in Firefox with firebug and could see that the rules were missing. That means the only answer could be a typo or invalid rule above those styles and therefore was just a matter of finding it. I formatted the code in my editor and the ending quote stuck out like a sore thumb.