CODEWITHSUNDEEP
htmlcssfirefoxiframelinkedin-api
Todo
Todo

Reputation: 657

Linkedin Follow Button not showing properly in Firefox

I've set the Linkedin Follow button within a hidden element, so only when you hover an icon, the hidden element becomes visible and button is shown.

Problem is that in Firefox v35.0.1 the followers number is shown not on the same row, as if there is no enough space on the same row. Look at the photo:

enter image description here

When I'm expecting the source code it seems the iframe is being set width and height in the moment of becoming visible (on hover) and then (on blur) its width/height is set back to 0. In Chrome the iframe has a constant width/height, which doesn't change on hover.

I tried to set the iframe width with css, which didn't work because when I expected the code it turned out there is another iframe in the Linkedin iframe and the internal iframe has again wrong dimensions.

Any ideas?

UPDATE: when I set the wrapping element to be visible all is good, so this seems to cause the problem, but how can I fix it?

UPDATE 2: You can see the problem yourself: link (make sure open it in Firefox!)

EDIT: Someone edited my post removing Linkedin tag from it, but I truly believe that this is more their issue than Firefox's or CSS, as there is something within their javascript that adds the width/height to the button iframe and adds them wrong. Also in IE the same issue appears. I added the button twice - first time as it was and second time in a visible wrapper and it's obvious that in the visible wrapper all is OK, though in the hidden wrapper is broken.

UPDATE 3: I realized that the button iframe width is the same as its #body element's 'min-width: 57px', so if Linkedin team correct that min-width to let's say 120px this may solve this problem.

Upvotes: 2

Views: 1354

Answers (1)

Hector
Hector

Reputation: 216

problem is here :

problem in firefox

in firefox the loaded width are 2px in the element but in webkit(chrome and opera) are 106px.

the style is not making enough width to show elements in one line. and here is answer : 

    .social-details {
    width: 195px;
    /* float: left; */
    position: absolute;
    left: -120px;
    top: -7px;
    background-color: white;
    padding: 11px 10px 8px 10px;
    z-index: -1;
    border-radius: 5px;
    visibility: hidden;
}

and 

#social .social-linkedin:hover .social-details {
visibility: visible;
}

its allow the element load with 106px of width and it is hidden to users.

Upvotes: 1

Related Questions