Why does the following css code for hover work in Firefox and IE but Not in Google Chrome ?

  • ianizaguirre

    #7918

    Why does the following css code for hover on a recent post widget on my front page work in Firefox and IE but does Not take effect in Google Chrome ?

    .rpbc a:hover {
    background: no-repeat scroll right center #FFFFFF !important;
    border: 2px solid #46A5E5 !important;
    border-radius: 3px 3px 3px 3px !important;
    position: absolute !important;
    margin-right: 3px !important;
    z-index: 10 !important;
    text-shadow: 0 1px #ffffff !important;
    color: #000000 !important;

    }

    Thanks for your help

    Mod

    Kenneth John Odle

    #39821

    Which aspects of this code don’t work? All of them?

    Don’t overdo it with the !important tag, either. Only use it where necessary, or it can cause headaches for you down the road.

    ianizaguirre

    #39822

    Ok thank you for pointing that out, I just read up and how to properly use the tag and how it works.

    My code now looks like this :

    .rpbc a:hover {
    background: none no-repeat scroll right center #FFFFFF ;
    border: 2px solid #46A5E5 ;
    border-radius: 3px 3px 3px 3px ;
    color: #000000 !important;
    margin-right: 3px ;
    position: absolute ;
    text-shadow: 0 1px #FFFFFF ;
    }

    And NOTHING works only in Google Chrome with this particular code. It is supposed to have a hover effect over a recent posts widget I have on my homepage. It works perfectly in Internet explorer and Fire fox but when I go to Google chrome there is no hover effect visible ?

    Mod

    Kenneth John Odle

    #39823

    Can you include a link to a page where this is/isn’t visible?

    ianizaguirre

    #39824

    Yes its my home page : http://iamdentistry.com/

    It the recent post widget the has title Dentistry and the other one that has title Fitness – located under my slider

    —-its supposed to have a hover effect when you hover over the posts each widget lists . You can see the effect in IE and Firefox to see it and then look in chrome to notice no effect

    Mod

    Kenneth John Odle

    #39825

    Well, for one thing, you have a lot of errors in your CSS. I just ran your style sheet through three different validators, and got 50-100 errors. (Not all validators are alike.)

    For example, on line 47, you have:

    #comments ol li.comment.depth-1, #comments ol li.pingback.depth-1, #comments ol li.trackback.depth-1 {
    background: #;
    }

    You are not including a hex value for the background. You should either include a value or delete this line. (At the very least, comment it out if you think you may need it later.)

    You also include HTML and JavaScript in your style sheet (the Facebook Like code), which do NOT belong in a style sheet. A style sheet can only contain CSS.

    I would worry more about fixing these errors first. They can make it difficult to diagnose issues.

    ianizaguirre

    #39826

    ok so I went through my css and fixed the empty css to look like this now :

    /*
    #sidebar1 {
    padding-top: px;
    }

    */

    And

    /*
    /* background color of non-author comment boxes */
    #comments ol li.comment.depth-1, #comments ol li.pingback.depth-1, #comments ol li.trackback.depth-1 {
    background: #;
    }

    /* background of the author comment box */
    #comments li.bypostauthor, #comments li.bypostauthor.comment.depth-1 {
    background: #;
    }

    */

    Does this now look like its coded out because I boxed the entire codes in/* and */ ? so its fine now ?

    And

    I take out the java script facebook like code from my css ? does that mean that right now it has no effect since its in my css so deleting will make no difference?

    -Thanks for your help

    Mod

    Kenneth John Odle

    #39827
    Quote:
    Does this now look like its coded out because I boxed the entire codes in/* and */ ? so its fine now ?

    Yes, that’s the correct usage of comment tags.

    Quote:
    I take out the java script facebook like code from my css ? does that mean that right now it has no effect since its in my css so deleting will make no difference?

    Well, it had no effect before, so taking it out means that you have fewer errors in your CSS.

    ianizaguirre

    #39828

    Thank you so much for your help, ok so right now I removed my facebook like code from my css

    which was this :

    /* Facebook like code */
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=622672177746284";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    /* gets rid of information on top of blog posts like date and meta tags */
    single .post-title entry-title { display: none; }
    .single .entry-title { display:none; }
    .single .meta_categories { display:none; }

    Now what do you suggest to figure out why the hover does not work in Google Chrome ?

    Mod

    Kenneth John Odle

    #39829

    Okay, after much research and tinkering, I think this will work. Take out position:absolute

    The reason is that Chrome uses a different rendering engine (Webkit) to what Firefox uses (Gecko), so sometimes there are differences.

Viewing 10 posts - 1 through 10 (of 11 total)

You must be logged in to reply to this topic.