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).
Any obvious css mistakes? Thanks in Advance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chef's Classic - Knock OUT 'Bout</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
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;
}
</style> </head>
<body style=" background-color:#666666">
<div id="fb-root"></div>
<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;">
<!--banner-->
<div style="text-align:center;">
<img height="250" src="images/banner.jpg" alt="Chef's Classic Knock Out Bout" />
</div>
<!--links-->
<div class="tabs" style="text-align:center">
<ul>
<li> <a href="#pages-about">About</a> </li>
<li> <a href="#pages-facebook">News & Updates</a> </li>
<li> <a href="#pages-tickets">Tickets</a> </li>
</ul>
</div>
<!--pages-->
<div id="pages-about" style="min-height:400px;">
</div>
<div id="pages-facebook" style="min-height:400px;">
<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"> </div>
<!--<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FChefs-Classic-Knock-OUT-Bout%2F225835004169328&width=550&height=427&colorscheme=light&show_faces=false&border_color=%23D7181E&stream=true&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:550px; height:427px;" allowTransparency="true">
</iframe>--> </div>
<div id="pages-tickets" style="min-height:400px;">
</div>
</div>
</body>
<script type="text/javascript">(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'));
</script> <script type="text/javascript">
// 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();
});
});
});
</script>
</html>
I think this is the windows scroll bar showing and hiding. Once you have content in all your tabs this should not be an issue.