WordPress.org

Ready to get started?Download WordPress

Forums

Contextual Related Posts
[resolved] Hovering doesn't work in Firefox, does work in internet explorer (24 posts)

  1. bartvandermark
    Member
    Posted 11 months ago #

    Since upgrading to 3.6.1 I have a strange problem:
    When hovering the related posts beneath the blogpost, hovering and clicking doesn't work in firefox, but it does work in internet explorer. Also with chrome on my android tablet, the related posts are not clickable. Example of blog with related posts at bottom:

    http://www.bartvandermark.nl/bruiloft-annelies-en-marien/

    http://wordpress.org/plugins/contextual-related-posts/

  2. bartvandermark
    Member
    Posted 11 months ago #

    I know what caused the problem: plugin shareaholic causes the conflict, I will investigate further, no action required from CRP :-)

  3. Ajay
    Member
    Plugin Author

    Posted 11 months ago #

    Bart,

    I checked out your site. What exactly do you mean by hovering?

    This seems to be more of a CSS related issue?

  4. Shareaholic
    Member
    Posted 11 months ago #

    @bartvandermark can we help with anything? -- support@shareaholic.com

  5. bartvandermark
    Member
    Posted 11 months ago #

    @Shareaholic the container of sharebuttons is too large and the CRP links are inside your container. I think that causes the CRP to be 'unclickable'. When I hover with my mouse over the CRP links, I can't click them. When I disable the shareaholic sharebuttons, the CRP links can be clicked again. In the following screen shot you can see that the container of the sharebuttons are too large:

    https://dl.dropboxusercontent.com/u/46665844/prscreen.png

  6. Shareaholic
    Member
    Posted 11 months ago #

    @bartvandermark mind enabling the plugin again so we can take a look at the code in action? also, have you tried related content that's built into shareaholic?

  7. bartvandermark
    Member
    Posted 11 months ago #

    Both plugins were/are enabled. See at the bottom of this post where I can't click the related posts because the container of the shareaholic aharebuttons is too large: CRP is in this container --> links don't work

    http://www.bartvandermark.nl/bruiloft-edmee-en-jasper/

    Edit: strange thing is that in Internet Explorer 10, the CRP links do work! In Firefox and Chrome, the links don't work, unless I disable sharebuttons from shareaholic

  8. Shareaholic
    Member
    Posted 11 months ago #

    Will take a look! Also recommend - https://shareaholic.com/publishers/recommendations

  9. bartvandermark
    Member
    Posted 11 months ago #

    I checked with another site which also uses the same sharebuttons, there the container only compromises the sharebuttons, see this screenshot:

    https://dl.dropboxusercontent.com/u/46665844/shareah2.png

    On my website, the exact container is too large and compromises the CRP related posts:

    https://dl.dropboxusercontent.com/u/46665844/shareah1.png

  10. bartvandermark
    Member
    Posted 11 months ago #

    Ok, some new info: I do think the problem is indeed CSS bases:

    In the CRP settings I have css. When I remove all the CSS from the CRP settings, the sharebuttons container no longer is too large. So the question is, which css setting causes the error in firefox and chrome, see below for the css in CRP settings:

    #crp_related ul {
    list-style: none;
    float: left;
    margin: 0px 0px 0px -46px ;
    }
    #crp_related li, #crp_related a {
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    }
    #crp_related li {
    margin: .04em;
    border: 0px solid #ddd;
    padding: 6px;
    }

    #crp_related a {
    width: 150px;
    height: 150px;
    }
    #crp_related a:hover {
    text-decoration: none;
    }
    #crp_related img {
    max-width: 150px;
    margin: 0px 0px 0px 0px ;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    }
    #crp_related .crp_title {
    position: absolute;
    height: inherit;
    bottom: 6px;
    left: 6px;
    padding: 3px;
    width: 144px; /* = 150px - (3px * 2) */
    color: #fff;
    font-size: .9em;
    text-shadow: #000 .1em .1em .2em;
    background: rgb(0.5, 0.5, 0.5);
    background: rgba(0, 0, 0, 0.5);
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    }
    #crp_related li:hover .crp_title {
    color: #EE97CC;
    background: rgb(0.2, 0.2, 0.2);
    background: rgba(0, 0, 0, 0.8);
    }

  11. Shareaholic
    Member
    Posted 11 months ago #

    Yep, got it. CRP CSS isn't as tight as it could be. There is a straightforward CSS workaround for it. Hold on tight.

    ps - there are very major performance advantages of using fewer plugins on your wordpress. Shareaholic already computes Related Posts for your site (you just need to display them and they will *just* work - just turn them on via the admin panel).

  12. bartvandermark
    Member
    Posted 11 months ago #

    I just switched them on to try them out but I couldn't manage settings, received error:

    https://dl.dropboxusercontent.com/u/46665844/shareah3.png

  13. Shareaholic
    Member
    Posted 11 months ago #

    @bartvandermark when you go to edit share buttons does it work?

  14. bartvandermark
    Member
    Posted 11 months ago #

  15. Shareaholic
    Member
    Posted 11 months ago #

    @bartvandermark mind jumping into our chat room so I can ask you a few questions in real-time? - https://www.hipchat.com/gnzzy5DQC

  16. Ajay
    Member
    Plugin Author

    Posted 11 months ago #

    Bart, am assuming the folks from Shareholic solved the issue you were having?

  17. bartvandermark
    Member
    Posted 11 months ago #

    @Ajay, actually not: I think that the css I applied in CRP causes the error: when I remove the css, the CRP links work. I want to use CRP, so for now I disabled shareaholic. Could you maybe look into my css and point out how to change it?

  18. Ajay
    Member
    Plugin Author

    Posted 11 months ago #

    Can you try a simple margin around the posts. Just temporarily to see if this works?

    #crp_related { margin: 20px 0px }
  19. Shareaholic
    Member
    Posted 11 months ago #

    Try:

    #crp_related {clear: both;}

  20. Shareaholic
    Member
    Posted 11 months ago #

    @bartvandermark btw, if you re-enable Shareaholic + clear your browser cache, the links should all work now. We worked around the issue with CRP by updating our CSS.

  21. Ajay
    Member
    Plugin Author

    Posted 11 months ago #

    @shareholic, glad to know this. As you might know, CRP doesn't come with inbuilt styles currently.

    Bart does it work with the new code? I strongly recommend testing it out. Shareholic has a really great plugin that serves to tempt users to promote your blog posts to social networks

  22. bartvandermark
    Member
    Posted 11 months ago #

    Tx guys, it works!
    I only reinstalled shareaholic, didn't need to change the css.
    Now I can use both great plugins ;-)

    Thanks again for your great support.

  23. Ajay
    Member
    Plugin Author

    Posted 11 months ago #

    Great to know that :)

  24. Shareaholic
    Member
    Posted 11 months ago #

    :)

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.