Hovering doesn't work in Firefox, does work in internet explorer

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

Bart,

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

This seems to be more of a CSS related issue?

@bartvandermark can we help with anything? — [email protected]

@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

@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?

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

https://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

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

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

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);
}

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).

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

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

Yes, that does work

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

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

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