I have been experimenting by adding a floating social media share bar to my web page.

The bar renders perfectly in I.E, Firefox, Opera, Chrome, and Safari, but refuses to behave when viewed in Netscape Navigator 9.

It's important for the bar to render properly in all of the above, and thought the problem might perhaps be due to something else on my web page interfering with its correct operation. However, when I test the bar using the mock up page I have posted a link to here, the same problem still exists.

Can anyone suggest what alterations I might make to the source code in order for this problem to be overcome?

Here's a link to my demo page.

http://www.corncreations.co.uk/test/floating_bar.html

Here's a link to the creators page, which includes the source code.

http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html

Any constructive advice gratefully received.

The code used for the demo is available by visiting the second of the links (above), but anyway, here it is:

<style type="text/css"> #floating_bar { background-color:#fff; position:fixed; padding:0 0 3px 0; bottom: 30%; margin-left:-60px; float:left; border: 1px dotted #f7f7f7; border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; z-index:10; } #floating_bar { clear:both; } </style> <div id='floating_bar'> <div style='margin:10px 0 5px 13px;' id='like'> <div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div> </div> <div style='margin:0px 0 0 10px;' id='gplusone'> <g:plusone size="tall"></g:plusone> </div> <div style='margin:5px 5px 5px 6px;'> <a href="https://twitter.com/share" class="twitter-share-button" data-via="mybloggertriks" data-lang="en" data-count="vertical">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> <div style='margin:5px 5px 5px 5px;' id='linkedin'> <script src='http://platform.linkedin.com/in.js' type='text/javascript'></script> <script data-counter='top' type='IN/Share'></script> </div> <div style='margin:0 0 10px 11px; id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <p style='line-height:0px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html' rel='nofollow' style='color:#333;'> Get Widget</a></p> </div>

As to what I've researched and tried so far - I've read other posts on this forum, and also Googled for an answer, but apart from reading a few posts elsewhere from others having difficulty with their Facebook Like buttons not rendering properly in Netscape, nothing else seemed relevant. I haven't tried altering the original source code yet, as I am not sure what to do that might correct the problem.