Databases
StackOverflow2013
Postsdbo
POFacebook Like Button shifts entire page centering when shown in div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFacebook Like Button shifts entire page centering when shown in div
    text
    copied!<p>I am trying to center my facebook like button. It is within a div that is shown/hidden based on menu items clicked. When I click the li (news and updates) that shows that div (and hides the others), my entire page gets shifted when clicked. Strangely enough, when I am "inspecting the element" in chrome, it does not shift. You should be able to copy and paste code from the window and view html (top banner wont load). </p> <p>Any obvious css mistakes? Thanks in Advance</p> <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;Chef's Classic - Knock OUT 'Bout&lt;/title&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; div { display: block; } .tabs { text-align:center; } .tabs ul { display: inline-block; margin: 0px; padding: 0px 0px 10px 0px; /* For IE, the outcast */ zoom:1; *display: inline; } .tabs li { list-style:none; display:inline-block; text-align:center; } .tabs a { padding:5px 10px; display:inline-block; background-color:#000000; color:#FFFFFF; text-decoration:none; width:150px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; -webkit-border-radius: 10px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */ -moz-border-radius: 10px; /* FF1-3.6 */ border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ } .tabs a:hover { background-color:#D7181E; } .tabs a.active { padding:5px 10px; display:inline-block; background-color:#666666; color:#FFFFFF; text-decoration:none; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; } &lt;/style&gt; &lt;/head&gt; &lt;body style=" background-color:#666666"&gt; &lt;div id="fb-root"&gt;&lt;/div&gt; &lt;div style="display:block; width: 800px; margin:0px auto; background-color:#FFFFFF; border-width: 50px 50px 50px 50px; -moz-border-image: url(images/main-border-oil-grey.png) 71 repeat; -webkit-border-image: url(images/main-border-oil-grey.png) 71 repeat; -o-border-image: url(images/main-border-oil-grey.png) 71 repeat; border-image: url(images/main-border-oil-grey.png) 71 repeat;"&gt; &lt;!--banner--&gt; &lt;div style="text-align:center;"&gt; &lt;img height="250" src="images/banner.jpg" alt="Chef's Classic Knock Out Bout" /&gt; &lt;/div&gt; &lt;!--links--&gt; &lt;div class="tabs" style="text-align:center"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#pages-about"&gt;About&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#pages-facebook"&gt;News &amp;amp; Updates&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#pages-tickets"&gt;Tickets&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;!--pages--&gt; &lt;div id="pages-about" style="min-height:400px;"&gt; &lt;/div&gt; &lt;div id="pages-facebook" style="min-height:400px;"&gt; &lt;div class="fb-like-box" data-href="http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328" data-width="550" data-height="600" data-show-faces="false" data-border-color="#D7181E" data-stream="true" data-header="true"&gt; &lt;/div&gt; &lt;!--&lt;iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FChefs-Classic-Knock-OUT-Bout%2F225835004169328&amp;amp;width=550&amp;amp;height=427&amp;amp;colorscheme=light&amp;amp;show_faces=false&amp;amp;border_color=%23D7181E&amp;amp;stream=true&amp;amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:550px; height:427px;" allowTransparency="true"&gt; &lt;/iframe&gt;--&gt; &lt;/div&gt; &lt;div id="pages-tickets" style="min-height:400px;"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;script type="text/javascript"&gt;(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); &lt;/script&gt; &lt;script type="text/javascript"&gt; // Wait until the DOM has loaded before querying the document $(document).ready(function(){ $('.tabs ul').each(function(){ // For each set of tabs, we want to keep track of // which tab is active and it's associated content var $active, $content, $links = $(this).find('a'); // Use the first link as the initial active tab $active = $links.first().addClass('active'); $content = $($active.attr('href')); // Hide the remaining content $links.not(':first').each(function () { $($(this).attr('href')).hide(); //assumes href contains div name }); // Bind the click event handler $(this).on('click', 'a', function(e){ // Make the old tab inactive. $active.removeClass('active'); $content.hide(); // Update the variables with the new link and content $active = $(this); $content = $($(this).attr('href')); // Make the tab active. $active.addClass('active'); $content.show(); // Prevent the anchor's default click action e.preventDefault(); }); }); }); &lt;/script&gt; &lt;/html&gt; </code></pre>
 

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