• Resolved wen.wainwright

    (@wenwainwright)


    My site is displaying correctly in firefox and safari but not in google chrome. Before I dedicate a crazy amount of hours to this I want to ask if it’s a common problem or something I’ve screwed up somewhere. The site is: https://strongerwithjeng.com – an example is that the top navigation button tab things are gray in chrome instead of green (as they are in firefox and safari). Yes, the hover green is working, just not the active link green.

    nav#site-navigation {
    color: #1e8239;
    }
    nav#site-navigation a {
    color: #1e8239;
    }
    nav#site-navigation a:link {
    color: #1e8239;
    }
    nav#site-navigation a:hover {
    color: #35e865;
    }
    *YES, this is a child theme
    **googled backticks and not sure how to make them.

Viewing 15 replies - 16 through 30 (of 32 total)
  • Okay, no problem then. But it does look like you have some more CSS syntax errors – the validator report shows:

    https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.strongerwithjeng.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

    Just look at the child theme style.css file – looks like most are those comment tags – which I wrote the wrong correction above earlier (I changed it since) – they should be like this:

    /* ...... */

    So see if you can clean those up to start with and see if that fixes things.

    Thread Starter wen.wainwright

    (@wenwainwright)

    I took out everything related to the search form. I added this to the style sheet (child), taken from the twenty twelve style.css:

    .main-navigation a {
    color: #1e8239; /* #5e5e5e */
    }
    .main-navigation a:hover {
    color: 35e865; /* #21759b */
    }

    Taking out the search form and using the styles from the parent theme and just changing the colors didn’t turn the gray into green in the top nav bar menu buttons/links (not sure exactly the best way to refer to them). I know that there are probably other places in the style sheet that are overriding these two bits of style…in the meantime is it possible that my header image is contributing to all of these problems? I also moved “leave a reply” to beneath the post and it’s not working correctly either. I didn’t mention it before since I figured whatever fixed the top nav could also be used to figure out how to fix it. Maybe changing the order of the header to above the navigation and the leave a reply to the bottom of the post is causing my problems? This is where we are now: https://strongerwithjeng.com

    Thread Starter wen.wainwright

    (@wenwainwright)

    I took all of my note type things out of the style.css (child). This made the green reappear in the top nav in Firefox but it’s still not working in Chrome. And the random floating menu button is still randomly floating in the header…

    The reason it’s floating is because you have “float” in this:

    <div class="alignright">
    <?php get_search_form(); ?>
    </div><!-- .alignright -->

    .alignright assigns float: right; by default. Change that to:

    <div class="mysearch">
    <?php get_search_form(); ?>
    </div><!-- mysearch -->

    Then add styles to the child theme using that class:

    .mysearch {
       ...
    }

    You’re also missing the hashtag on this color:

    color: 35e865; /* #21759b */

    You still have an error here:

    /* =Front page template
    -------------------------------------------------------------- */
    .template-front-page .widget-area .widget li a:hover {
    	color: color: #1e8239;
    }

    Thread Starter wen.wainwright

    (@wenwainwright)

    I fixed all of those things. The searchform is fine. The floating menu button is still floating and the css style to make the top navigation button/links in the top nav bar are fine in firefox (darker green and then a lighter green on hover) and still gray in google chrome…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Please clear your cache again.

    Thread Starter wen.wainwright

    (@wenwainwright)

    I did. And again for good measure! It didn’t help.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In your opinion are these grey https://awesomescreenshot.com/09c1kshd5c ?

    Thread Starter wen.wainwright

    (@wenwainwright)

    Yes, o.k. The green is harder to see in Chrome on my screen for some reason. They were always green in safari and firefox. What should I do about the floating menu button? Is there something that needs to be display: none; – or something like that?

    Thread Starter wen.wainwright

    (@wenwainwright)

    @wpyogi – any suggestions in regards to the “postinfo?” That is the result of my wanting to move the meta data to under the title rather than below the post. I tried to name it something I hadn’t seen elsewhere. Is it the name that is a problem, where it’s located, or the whole thing altogether? If it’s the whole thing do you have a suggestion about how to move that meta data up under the title?

    Thread Starter wen.wainwright

    (@wenwainwright)

    Oh, also I don’t understand why the postinfo is working if there are so many problems with it? What does that mean if it’s still working? Is it just poor code/styles?

    Thread Starter wen.wainwright

    (@wenwainwright)

    Oh, it looks like the “postinfo” is somewhere in the header and not in the navigation when I look at the errors, is that correct? The problem with the images is most likely from importing the entire thing from Blogger. If “postinfo” is just located in the wrong place I can fix that. If it’s a bigger issue I appreciate any insight and help! You two are being awesome about helping me, I really appreciate it!

    Still clueless on the floating menu button…again, is it just a display: none; type problem? Is it from the @media queries part? Truly I have no idea what to do with it. I got rid of it previously – long before I started this forum post – but I don’t remember how and I’m sure it was a disaster in terms of styles.

    Your site does not seem to be accessible now – so I can’t check on what’s going on. But when you have problems like CSS not working, it’s always a good step to make sure your code is valid. If you are changing code around in the header, check after every single change.

    Thread Starter wen.wainwright

    (@wenwainwright)

    I know it’s not. There is something wrong at Dreamhost that they haven’t resolved yet. My site is stuck in no man’s land or something. Hopefully they resolve it soon. Should I come back to this post if I can’t resolve the issue once I have the site back or start a new post?

Viewing 15 replies - 16 through 30 (of 32 total)
  • The topic ‘CSS not working in google chrome’ is closed to new replies.