iPad CSS giving unexpected results

rocky48 · January 2, 2015

I have been using some CSS written by Matthew Taylor (www.http://matthewjamestaylor.com), for displaying my web page on iPad orsimilar device. It works in most cases but for some reason it gives strange results when I try to output a table in the main screen area.

It puts the title heading in the right place, but the table for some reason underneath the footer and the page menu disappears completely.

It is usually caused by unclosed div tags, but I have checked them and they appear to be correct.

There is a good explaination of how the CSS works on his web site.

Here is the code for the PHP/HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Sat, 02 Mar 2013 20:21:23 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=768px, minium-scale=1.0, maximum-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="stylesheets/ipad.css" />
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
  <div id="fb-root"> 
<script>(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 = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script></div><!--end fb-root-->
<div id="wrap"> <!--Start wrap-->
   <div id="header"> <!--Start header-->
   		
		<img src="images/Head!.png" width="100%" height="150px" alt="" title="" border="0" />
		<h1>1066 cards4U</h1>
   </div><!-- end header -->	
   <div id="content"> <!--Start content-->
      <div id="main"> <!--Start main-->
	  <h3>Statistics for <? echo $Country; ?> in 2014</h3>
<h4>If only the header is shown, there is no data for this country</h4>
<?php
include('connect_visits.php');
doDB7();
$limitStart = $_POST['QUARTER'] - 13;
$Visit_data="SELECT WeekNo.WNo, WeekNo.WCom, Countries.Country, ctryvisits.CVisits
        FROM ctryvisits 
        LEFT JOIN Countries
            ON ctryvisits.country = Countries.CID
        LEFT JOIN WeekNo
            ON ctryvisits.WNo=WeekNo.WNo
        WHERE Countries.CID = '{$_POST['country']}'
        ORDER BY ctryvisits.WNo
	 LIMIT {$limitStart}, 13";
$Visit_data_res = mysqli_query($mysqli, $Visit_data) or die(mysqli_error($mysqli));
$display_block = "
<table width=\"20%\" cellpadding=\"3\" cellspacing=\"1\" border=\"1\" BGCOLOR=\"white\" >
	<tr>
	<th>Week No</th>
	<th>Week Commencing</th>
	<th>Visits</th>
		</tr>";	
while ($C_info = mysqli_fetch_array($Visit_data_res)) {
		$Cid = $C_info['WNo'];
		$Visits = ($C_info['CVisits']);
		$WeekNo = ($C_info['WCom']);
//add to display
$display_block .= "
<tr>
<td width=\"1%\" valign=\"top\">".$Cid."<br/></td>
<td width=\"8%\" valign=\"top\">".$WeekNo."<br/></td>
<td width=\"5%\" valign=\"top\">".$Visits."<br/></td>
</td></tr>";
}
mysqli_free_result($Visit_data_res);

$CNo2Cty ="SELECT CID, Country FROM Countries WHERE CID='{$_POST['country']}'";
$CNo2Cty_res =mysqli_query($mysqli, $CNo2Cty) or die(mysqli_error($mysqli));
if (mysqli_num_rows($CNo2Cty_res)<1){
$display_block="<p><em>Invalid Country, Please try again</em></p>";
}
while ($C_name = mysqli_fetch_array($CNo2Cty_res)) {
}
mysqli_free_result($CNo2Cty_res);
//mysqli_close(mysqli);
?>
<?php echo $display_block; ?>

		<div class="fb-comments" data-href="http://www.1066cards4u.co.uk" data-width="470"></div><br />	
		<div class="fb-like" data-href="http://www.1066cards4u.co.uk" data-send="true" data-layout="box_count" data-width="300" data-show-faces="true" data-font="arial"></div> <!-- end fb-like -->
</div> <!--end main--> 		
<div id="side"> <!--Start side-->
<div id="sidea"> <!--Start sidea-->
		 <h3>Main Menu</h3>
         <p><ul>
         <li><a href="index1.html">Home</a></li>
         <li><a href="iLinks.html">Links</a></li>
         <li><a href="iTechniques.html">Techniques</a></li>
 	 <li><a href="iVerse_Menu.html">Verse's</a></li>
         <li><a href="icontact.html">Contact Us</a></li>
	 <li><a href="iblog.php">Blog</a></li>
	 <li><a href="iAboutUs.html">About Us</a></li>
	 <li><a href="iGallery.html">Gallery</a></li>
	 <li><a href="iStats_Menu.html">Stats</a></li>
	 <li><a href="iRelHol_Menu.html">Religious Holiday's</a></li>
	 <li><a href="iSub_form.html">Subscribe to Newsletter</a></li>
         </ul></p>
</br>
</div> <!--end sidea-->
<div id="sideb"> <!--Start sideb-->

</div> <!--end sideb-->
<div id="sidec"> <!--Start sidec-->
</div> <!--end sidec-->
</div> <!--end side-->
</div> <!--end content-->
<div id="footer"> <!--Start footer-->
    <p>© 2012 Content:1066 Cards 4U. All rights reserved.   <br />
	With thanks to Matt Taylor - matthewjamestaylor.com</p>
		
</div> <!--end footer-->
</div> <!--end wrap-->
</body>
</html>

Here is the CSS:

* {
	margin:0;
	padding:0;
}
h2 {
	padding:1em 0 0 0;
}
p {
	line-height:1.4em;
}
p + p {
	text-indent:2em;
}
body {
	font-size:100%;
	text-align:center;
	background:#ddd;
}
pre {
	display:block;
	margin:1em 0 0 0;
	width:488px;
}
pre code {
	background:#eee;
	display:block;
	padding:10px;
}
.r {
	float:right;
	padding:0 0 10px 20px;
}

/* Landscape mode (default) */
#wrap {
	margin:0 auto;
	width:1024px;
	position:relative;
	overflow:hidden;
	text-align:left;
	background:#fff;
}
#header {
	float:left;
	width:1024px;
	padding:10px 0 20px 0;
	background:#fff;
	border-bottom:1px solid #000;
}
#header h1 {
	padding:10px 30px 0 30px;
}
#header p {
	padding:0 30px;
	line-height:1.4em;
}
#content {
	float:left;
	width:1024px;
	background:#eee;
	position:relative;
	left:768px;
}
#main {
	float:left;
	width:708px;
	position:relative;
	right:738px;
	padding:20px 0;
}
#side {
	float:right;
	width:216px;
	position:relative;
	right:788px;
	padding-bottom:20px;
}
#sidea,
#sideb,
#sidec {
	clear:left;
	float:left;
	width:216px;
}
#footer {
	clear:both;
	float:left;
	width:1024px;
	border-top:1px solid #000;
	background:#ddd;
}
#footer p {
	padding:20px 30px;
}

@media only screen and (orientation:portrait){
	/* portrait mode */
	#header,
	#wrap,
	#footer {
		
	}
	#content {
		left:0;
		background:#fff;
	}
	#main {
		float:left;
		width:708px;
		position:relative;
		right:0;
		left:30px;
		padding:20px 0;
	}
	#side {
		clear:left;
		float:left;
		width:768px;
		right:0;
		padding-bottom:20px;
		background:#eee;
	}
	#sidea {
		clear:none;
		width:216px;
		float:left;
		position:relative;
		left:30px;
		padding-top:20px;
	}
	#sideb {
		clear:none;
		width:216px;
		float:left;
		position:relative;
		left:60px;
		padding-top:20px;
	}
	#sidec {
		clear:none;
		width:216px;
		float:right;
		position:relative;
		right:30px;
		padding-top:20px;
	}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
   width:768px;
}
}

I have spent hours trying different things, but I can't find a solution.

I believe its a CSS problem, but if you think it is HTML can the moderator move it?

Your help would be appreciated.

rocky48 · January 6, 2015

Found that <form> tag was not closed.

cssfreakie · January 14, 2015

Found that <form> tag was not closed.

Good to hear! Off-topic: make sure you do not accept user input that easily into your sql-queries. It's a vulnerability now

 WHERE Countries.CID = '{$_POST['country']}'

Sign In

iPad CSS giving unexpected results

Recommended Posts

rocky48

Link to comment

Share on other sites

rocky48

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information