SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Hillsborough NH
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.
    Matt Nelson
    Nelson Design Studios
    www.nelsondesignstudios.com

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,857
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Hillsborough NH
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Screen shot 2012-08-01 at 3.04.07 PM.pngSorry, 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?
    Matt Nelson
    Nelson Design Studios
    www.nelsondesignstudios.com

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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:
    Code:
    #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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Hillsborough NH
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Matt Nelson
    Nelson Design Studios
    www.nelsondesignstudios.com

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,857
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •