Button No Showing on Firefox or IE Only on Chrome

HTML & CSS
1

Please help me, my site is www.luarangkasa.com

I add Google Follow button on the top navigation, it does not show up on Firefox or IE, but it works on Google Chrome.

Please tell me what’s wrong. Thanks.

2

To try and narrow the problem down try adding this css to show the widget by default.


.social-expand {display:block!important}

I’m wondering if the script isn’t working because the element is hidden to start with. At least the code above should either confirm or rule out that avenue of debugging.:slight_smile:

3

When I follow your advice, the button does show up, any advice to make it work?

4

Hi,

You could try setting it to display:block to start with and then hiding it with js once the document has loaded.

e.g.

Add this JS before the closing body tag at the end of the html.


<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('.social-expand').css( "display", "none" );
});
</script>

Then adjust the CSS:


.social-expand {display:block}

If that doesn’t work I’ll move the thread to the JS forum as this is more js related than css :slight_smile:

5

Thank you for trying helping me, but it still does not work.

6

I don’t see the css I gave you in your stylesheet?

You still have the display:none on .social-expand.

7

Paul O’B, I tested it on localhost. Here I updated it on the live website, please check.

8

Paul O’B, sorry it seems that I can’t edit above post. I wanted to say that when first visit to the website the button does not show up, but then if you refresh the page, it shows up. I tried and close Firefox, and the same thing happens again, first visit the button not show up but after refresh it shows up.

9

FYI: I see the Google plus button in Firefox and IE11 when the page is first opened; same as Chrome.

10

I think it’s there but because of the computed color (.hma #262626 from https://apis.google.com//scs/apps-static//ss/k=oz.cpw.-6uxmpkbnmimx.L.F4.O/m=cpw,wf/am=ACAh/d=1/rs=AItRSTPzwGGrzRxBOJCJIGm-1WaRsKajkQ) you can’t see it.
Turn of CSS and it’s there

11

Hi,

Perhaps try not hiding the element with display:none but hide it off-screen instead.

e.g.


.toggle-social + .social-expand{
display:block!important;
left:-999em;
right:auto;
}

.toggle-social.active + .social-expand{
display:block!important;
left:auto;
right:58px;
}

If that doesn’t work then I’ll move the thread to the JS forum as I think the solution will be there.:slight_smile:

12

Hi, sorry was busy working at the office, only have time during the weekend. I tested the code, Paul, and it is working. Thank you.