Losing centered layout on a tablet stylesheet

HTML & CSS
1

I’ve tried to figure this out for days now, so I’m hoping someone here can help.

I have a site that is centering on the screen just like I want it to when viewed via my regular desktop stylesheet ([URL=“http://saraholt.com/dg/css/style.css”]style.css) but left aligns on my tablet stylesheet ([URL=“http://saraholt.com/dg/css/tablet.css”]tablet.css). The main problem areas are the navigation and the #main div, which holds all the main content below navigation. (The footer, which is just some centered text inside a 100%-width div, is centering fine.)

A simple example page to look at would be the Performing Live page. Here’s a screenshot of the tablet view on the iOS Simulator I’m using to view the site on a tablet. You can see that the navigation and main content are all left aligning when I’d like them to be centered.

Relevant html for this page, which is directly inside the body tag:

<div id="container">

<div class="clearfix" id="nav_bg">  <header class="container clearfix">
<div id="logo">
<a href="index.php"><img src="img/logo.png" width="272" height="110" alt="DanaGould.com"></a></div>
  <!-- end LOGO -->
<nav class="clearfix"><div id="navbuttons"><ul>
<li><a href="podcast.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Podcast','','img/podcast_on.png',1)"><img src="img/podcast_off.png" alt="Podcast" name="Podcast" border="0"></a></li>
<li><a href="live.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('PerformingLive','','img/performing_on.png',1)"><img src="img/performing_off.png" alt="Performing Live" name="PerformingLive" border="0"></a></li>
<li><a href="video.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Video','','img/video_on.png',1)"><img src="img/video_off.png" alt="Video" name="Video" border="0"></a></li>
</ul></div><!-- end NAVBUTTONS -->

<div class="clearfix" id="socialmedia"><ul>
<li></li>
<li><a href="http://www.facebook.com/officialdanagould" target="_blank"><img src="img/facebook_icon.png" alt="Facebook" border="0"></a></li>
<li><a href="https://twitter.com/#!/DanaJGould" target="_blank"><img src="img/twitter_icon.png" alt="Facebook" border="0"></a></li>
<li><a href="http://danagould.tumblr.com/" target="_blank"><img src="img/tumblr_icon.png" alt="Facebook" border="0"></a></li>
<li><a href="http://feeds.feedburner.com/TheDanaGouldHour" target="_blank"><img src="img/rss_icon.png" alt="Facebook"  border="0"></a></li>
</ul>
</div><!-- end SOCIALMEDIA -->
</nav>

</header>
<div class="clearfix" id="mobilebar"><img src="img/mobilebrush.png"></div><!-- end MOBILEBAR -->

</div><!-- end NAV_BG -->

<div class="clearfix" id="main">

<!-- InstanceBeginEditable name="Main" --><div id="fullwidthblank"><div id="liveheader">
  <h1>Performing Live</h1>
  </div><!-- end LIVEHEADER -->
 <div id="livebody"> <table width="100%" border="0" cellspacing="0" cellpadding="0">

...

</table>
</div><!-- end LIVEBODY -->
</div><!-- end FULLWIDTHBLANK -->
<!-- InstanceEndEditable -->
</div><!-- end MAIN -->
<footer class="clearfix">
&copy; 2012 Dana Gould • <a href="about.php" target="_self">About</a> • Web Design by <a href="http://www.saraholt.com" target="_blank">Sara Holt</a></footer>
</div><!-- end CONTAINER -->

Relevant styles from style.css (desktop):

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	 height:100%;
    overflow-y:scroll; /*keep scrollbox present at all times*/
}

html, button, input, select, textarea {
	font-family: sans-serif;
	color: #222;
	margin: 0 auto;
}
	
body {
	margin: 0 auto;
	font-size: 1em;
	line-height: 1.4;
	color: #fffeb9;
	text-decoration: none;
	background-image: url(../img/bg_papertexture.jpg) ;
	background-repeat: repeat;
	background-position: center center;
}


#container	{
	background-image: url(../img/radialglow.png);
	background-repeat: no-repeat;
	background-position: center top;
	width: 100%;
	margin:0 auto;
	min-height: 400px;
}


#nav_bg {
	height: 110px;
	width: 100%;
	background-image:url(../img/nav_bg.png);
	background-repeat: repeat-x;
	margin: 30px auto 0;
}

header {
	width: 960px;
	margin: 0 auto;
	height: 110px;
	text-align: left;
}

.container {
    /* for IE */
    text-align: center;
}

#main {
	margin: 0 auto;
	width: 960px;
	padding-bottom: 0px;
}

nav {
	text-align: left;
	height: 75px;
	width: 60%;
	margin: 0 auto 0 25px;
	float:left;
	
}

#logo {
	
	margin-left: 30px;
	float: left;
	height: 110px;
	width: 292px;
}


#nav_bg header nav #navbuttons ul {
	list-style-type: none;
}
#nav_bg header nav #navbuttons ul li {
	display: inline;
}

#navbuttons	{
	float: left;
	margin-top:25px;
	
}
	

#socialmedia	{
	float:left;
	margin-left: 20px;
	margin-top:25px;

}


#socialmedia ul{
	list-style-type: none;
}

#socialmedia ul li	{
	display: inline;
}

#mobilebar	{
	display: none !important; visibility: hidden;
}

#fullwidthblank	{
	width: 900px;
	margin-left: 50px;
	margin-top: 15px;
}

#liveheader	{
	background-image: url(../img/brushes_header_live.png);
	background-repeat: no-repeat;
	background-position: right top;
}

Relevant styles from tablet.css:


html, body	{
	width:100%;
	height: 100%;
	overflow-y: scroll;
	margin: 0 auto;
}

body	{
	text-align:center;
	margin:0 auto;
	height:auto;
	overflow: hidden;
	
}


#container	{
	width: 100%;
	background-image: url(../img/radialglow.png);
	background-repeat: no-repeat;
	background-position: center 100px;
	background-size: auto 500px;
	text-align:center;
	margin: 0 auto;
	height:auto;
	padding:0;
	
}

#nav_bg {
	width:100%;
	background-image:url(../img/nav_bg.png);
	background-repeat: repeat-x;
	background-size: auto 80px;
	margin: 0 auto;
	padding:0;
	text-align:center;
	height: 85px;
	
}

#main	{
	width: 768px;
	margin: 0 auto;
	padding: 0;
	
}

header	{
	height: auto;
	margin: 0 auto;
	width: 768px;
	text-align:center;
}



#logo	{
	height:auto;
	padding:0;
	margin: 0 auto;
	float:left;
	width: 23%;
	
	
}

#logo img	{
	height:auto;
	width:100%;
	
}

nav		{
	min-height:35px;
	width: 60%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 18px;
	text-align: center;
	height:auto;
	
}
#navbuttons	 {
	float: left;
	margin-top: 0px;

	
}

#navbuttons	img {
	float: left;
	max-height: 35px;
	width: auto;
	
}

#socialmedia	{
	float:left;
	margin: 0;
	padding-left: 10px;
	

}


#socialmedia ul{
	list-style-type: none;
	
}

#socialmedia ul li	{
	display: inline;
	float: 	left;
}

#socialmedia ul li img	{
	float: left;
	max-height: 35px;
	width: auto;
}

#fullwidthblank	{
	margin:0 auto;
	width:100%;
	
}

#liveheader	{
	background-image: none;
	width:100%;
	margin: -25px 0 0 0;
}

What am I missed here? Any help would be greatly appreciated!

2

Anyone? This is the very last thing I need to figure out before my site goes live. Thank you!

3

sparkler,

The index page does not have a valid !DOCTYPE. Try putting
<!DOCTYPE html>
alone as the very top line in the file and see if that helps.

4

Yes, it would be good to get rid of this at the top of the page if you can:

<!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="true" -->
5

Darn, I thought I already took care of that. Ok, it’s fixed now. Doc type is first. I’m still seeing everything left aligned on a tablet.

6

Oh and the site is live, so the links are changed as follows:
Site
style.css
tablet.css

7

This may not help, but anyhow, don’t put anything between the doctype and the <head> element, except perhaps a language type:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

So move all those conditional comments etc. down into the <head>.