Databases
StackOverflow2013
Postsdbo
PONetscape Incorrectly Renders Floating Share Bar
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONetscape Incorrectly Renders Floating Share Bar
    text
    copied!<p>I have been experimenting by adding a floating social media share bar to my web page. </p> <p>The bar renders perfectly in I.E, Firefox, Opera, Chrome, and Safari, but refuses to behave when viewed in Netscape Navigator 9. </p> <p>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. </p> <p>Can anyone suggest what alterations I might make to the source code in order for this problem to be overcome?</p> <p>Here's a link to my demo page.</p> <p><a href="http://www.corncreations.co.uk/test/floating_bar.html" rel="noreferrer">http://www.corncreations.co.uk/test/floating_bar.html</a></p> <p>Here's a link to the creators page, which includes the source code.</p> <p><a href="http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html" rel="noreferrer">http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html</a></p> <p>Any constructive advice gratefully received.</p> <p>The code used for the demo is available by visiting the second of the links (above), but anyway, here it is:</p> <pre><code>&lt;style type="text/css"&gt; #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; } &lt;/style&gt; &lt;div id='floating_bar'&gt; &lt;div style='margin:10px 0 5px 13px;' id='like'&gt; &lt;div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div style='margin:0px 0 0 10px;' id='gplusone'&gt; &lt;g:plusone size="tall"&gt;&lt;/g:plusone&gt; &lt;/div&gt; &lt;div style='margin:5px 5px 5px 6px;'&gt; &lt;a href="https://twitter.com/share" class="twitter-share-button" data-via="mybloggertriks" data-lang="en" data-count="vertical"&gt;Tweet&lt;/a&gt; &lt;script&gt;!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');&lt;/script&gt; &lt;/div&gt; &lt;div style='margin:5px 5px 5px 5px;' id='linkedin'&gt; &lt;script src='http://platform.linkedin.com/in.js' type='text/javascript'&gt;&lt;/script&gt; &lt;script data-counter='top' type='IN/Share'&gt;&lt;/script&gt; &lt;/div&gt; &lt;div style='margin:0 0 10px 11px; id='su'&gt; &lt;script src="http://www.stumbleupon.com/hostedbadge.php?s=5"&gt;&lt;/script&gt; &lt;/div&gt; &lt;p style='line-height:0px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'&gt;&lt;a href='http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html' rel='nofollow' style='color:#333;'&gt; Get Widget&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; </code></pre> <p>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. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload