Netscape Incorrectly Renders Floating Share Bar

Question

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.

Answer 1

1. There's a point when backwards compatibility goes too far.

why Netscape fails to render the bar in the same way as all the other main browsers

You're implying that Netscape is a "main browser" like the browsers you mentioned in your question. Netscape used to have a significant market share, but its time has passed (see History of the web browser on Wikipedia, specifically the timeline chart at the bottom of the article; Also Usage share of web browsers for current statistics).

It makes the question irrelevant from a practical standpoint. It's hard to justifying the question let alone finding an answer, given that you're attempting to support a legacy browser.

But let's assume you have a valid reason for supporting a browser that is virtually extinct...

2. What is the problem?

"The bar ... refuses to behave"

You might as well be saying, "it doesn't work". How doesn't it work? What is the expected behavior, and how is the actual result deviating from your expectation? You shouldn't expect us to download a browser that hardly anybody has used for over a decade to confirm an ambiguous bug description (SSCCE).

3. Your HTML is funky

• No formatting The lack of indentation isn't a technical concern (only a nitpick), but makes it hard to read
• Inconsistent use of quotes The general practice is to use double quotes " for HTML attributes. For example: <div id="floating_bar">.
• **Is that ! supposed to be there in the <script/> tag?
• <g:plusone/> is not a valid HTML tag. Were you trying to do something like this?
• The CSS is probably not working because the bottom property is set as a percentage. Support for bottom/right was pretty spotty at first, and percentage might be iffy.