Problems with PHP includes - Doctype and meta tags under body xml schema

Teknikal_Tim · June 13, 2012, 2:22pm

Hi,

I was wondering if anyone else has had issues with php includes moving the doctype and meta tags into the body xml schema in IE debug tools. IE is epically failing on several of my pages when code returns a warning even when I have gracefully corrected the warning. See screenshot of the IE9 Debug bar:

as you can see it messes up the styling of the page:
here is what the page looks like when I go direct to the feedback page on my development server (www.teknikaltim.com/feedback/feedback.html.php):

here is the html.php template that is my feedback page. when visitors go to my feedback url (www.teknikaltim.co.uk/feedback/) the index.php file above will eventually connect to a database that will hold a news message (a helpful hint or a greating of my choice), which will be displayed under my mobile number. The script will also check to see if they have a session on the server and show appropriate links on the top left of the page.

/feedback/feedback.html.php:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<title>Teknikal Tim - Feedback</title>
	<meta name="description" content="Teknikal Tim Feedback Page">
	<meta name="author" content="Tim Maclennan">
	
	<link rel="stylesheet" href="/css/styles.css?v=1.0">
</head>

<body>
	<!-- Detect if the visitor is using IE 8 or below then if they are, check if java scripting is enabled.-->
	
	<!--[if lt IE 9]>
	<noscript id="info">I have identified you are using internet explorer but a version prior to IE9.
	<br>
	Please enable Java scripts if the page looks strange or if some of the functions fail to work
	</noscript>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	Page not displaying correctly?  Please upgrade your browser to IE9 or later, or turn off compatibility mode.
	<![endif]-->
	
	<!--Site header start-->
	<header>
	<!-- Place news Message here so it can float to the right hand side at the top of the page -->
	<article id="UsefulInfo">my number goes here<br><!--<//?php echo '<MARQUEE>' .$curNewsMessage .'</MARQUEE>'; ?>--><br></article>
	<!-- session links are here so they can be placed at the very top of the page above the main header-->
	<nav id="session"><!-- Links Dynamically created / Updated to allow users to login, register, loggout or admin to access cms -->
	<!-- ?php htmlout($logged); ? -->
	<!--<//?php echo $logged; ?>-->
	</nav>	
		<div id="Welcome"><a href="/"><img alt="Teknikal Tim" src="/images/Teknikal%20Tim.png"></a>
		</div>
		<div id="sitelinks">
		<nav id="sitelinks"> <!-- Horizontal navigation bar -->
	<ul>
		<li><a href="/">Home</a></li>
		<li><a href="/about/">About Teknikal Tim</a></li>
		<li><a href="/services/">Services</a>
			<ul id="services">
				<li><a href="/services/#cleanup">Cleanup</a></li>
				<li><a href="/services/#remoteassistance">Remote Assistance</a>
					<ul>
						<li><a href="/services/#AvastRemote">Via Avast Anti Virus</a></li>
						<li><a href="/services/#TeamViewerRemote">TeamViewer</a>
							<ul>
								<li><a href="/services/#TeamViewerLicenceAgreement">Team Viewer Licence Agreement</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="/services/#rendering">Rendering</a></li>
				<li><a href="/services/#setup">Setup</a></li>
				<li><a href="/services/#webdev">Website Design &amp; Developement</a></li>
			</ul>
		</li>
		<li class="currentpage" ><a href="/feedback/">Feedback</a></li>
	</ul>
	</nav>
	</div>
		
	</header>
	<!--Site header end-->
	
		
	
	
	<footer><article id="copyright"><?php echo '&copy; Teknikaltim.co.uk ' .Date('Y') .' All rights reserved'; ?></article></footer>
</body>
</html>

and here is the index.php file:
/feedback/index.php:

<?php
include $_SERVER['DOCUMENT_ROOT'] .'/includes/db.inc.php';
include_once $_SERVER['DOCUMENT_ROOT'] .'/includes/access.inc.php';
include_once $_SERVER['DOCUMENT_ROOT'] .'/includes/ObjectClasses.inc.php';
include 'feedback.html.php';
?>

If you need I can temporarily upload developement site to the live server for you to see what i mean. I have tested the layout in Firefox, Opera and Safari,

Firefox is the best browser (it doesn’t break page layout in firefox) in opera and safari there is a gap at the top of the page which, when navigating from another page to Feedback it looks like the whole page Jumps down.

drop me an email (enquiries@teknikaltim.co.uk) if you would like the development website live at www.teknikaltim.co.uk. or drop me a text on the number on the top of the site

Many thanks for any help in advance

Tim,

Teknikal Tim

cpradio · June 13, 2012, 3:18pm

Do any of these files perform any output?
include $_SERVER[‘DOCUMENT_ROOT’] .‘/includes/db.inc.php’;
include_once $_SERVER[‘DOCUMENT_ROOT’] .‘/includes/access.inc.php’;
include_once $_SERVER[‘DOCUMENT_ROOT’] .‘/includes/ObjectClasses.inc.php’;

cpradio · June 13, 2012, 3:21pm

Sorry, should clarify my question with a few more meaningful items:

Are there any empty lines after the closing ?> tag?
Any warnings/errors being outputted?
Any notices being displayed from these files?
Any echo/print statements?

Teknikal_Tim · June 13, 2012, 4:43pm

sorry I should of mentioned I commented out the the include statements refering to the /includes/ include files to test and it replicated the same isue. I even made a new test directory /test/index.php and only had one include for the template file and it did the same:

<?php include 'page.html.php'; ?>

try for your self. install wamp or mamp create a simple index.php file and simple page.html.php file if you have internet explorer 9 press F12 to get the debug bar. when you go to firefox and veiw code it is fine but IE fails drastically.

Teknikal_Tim · June 13, 2012, 4:49pm

it must be something to do with either php or apache not understanding the new html5 !doctype html tag

cpradio · June 13, 2012, 5:00pm

neither php nor apache need to understand any doctype. I’ve been using HTML5 in php includes without any problems. So something else must be going on.

It could be your marquee tag, that is not a valid HTML5 tag. And from what I read here, it could force IE to switch into quirks mode thus explaining your problem.

cpradio · June 13, 2012, 5:00pm

You should also run your HTML5 through http://validator.w3.org/ to fix any other HTML5 errors too

Teknikal_Tim · June 13, 2012, 8:04pm

I commented out all the directory “Includes” include lines and uncommented them one by one.

The one that fell over was the “include $_SERVER[‘DOCUMENT_ROOT’] .‘/includes/db.inc.php’;” I deleted the content of this file db.inc.php and re-wrote it as follows:

From:

<?php
try
{
$pdo = new PDO('mysql:host=localhost;dbname=teknikalti1', 'myusername',
'mypassword');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->exec('SET NAMES "utf8"');
}
catch (PDOException $e)
{
$error = '<p><h1>Unable to connect to the database server.</h1> <br><br>The content of this page is held in the database.<br>sorry for any inconvenience.
<br>I am liasing with streamline to get this resolved as quickly as possible.</p>';
include 'error.html.php';
exit();
}
?>

To:


<?php
try
{
$pdo = new PDO('mysql:host=localhost;dbname=teknikalti1', 'myusername', 'mypassword');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->exec('SET NAMES "utf8"');
}
Catch (PDOException $e)
{
$error = 'Unable to connect to the database server.';
include 'error.html.php';
exit();
}

$output = 'Database connection established.';

?>

Many thanks for your advice. I was going spare trying to fix this.

Teknikal_Tim · June 13, 2012, 8:41pm

$error = '<p><h1>Unable to connect to the database server.</h1> <br><br>The content of this page is held in the database.<br>sorry for any inconvenience.
<br>I am liasing with streamline to get this resolved as quickly as possible.</p>';

cpradio · June 13, 2012, 9:45pm

I’m glad you have it working now.

Teknikal_Tim · June 15, 2012, 3:51pm

Seems that the problem is not quite sorted… it now shows a gap from the top of the body (window) when the connection to the database is broken in IE and the head metags are in the body. I think the PDO::__Construct warning is generating an invisible character which Firefox doesn’t show hense the page doesn’t break in Firefox but the character looks like this ï»¿ how would I catch the construct warning.

Many thanks my db.inc.php code is changed slightly so I can change the database credentials

<?php
// production dbstrings
$dbhost='localhost1';
$dbname='teknikalti1';
$dbusername='teknikalti1';
$dbpassword='pa$sword1';

try
{
$pdo = new PDO('mysql:host='.$dbhost .';dbname='.$dbname, $dbusername, $dbpassword);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->exec('SET NAMES "utf8"');
}
Catch (PDOException $e)
{
$error = 'Unable to connect to the database server.';
include 'error.html.php';
exit();
}

$output = 'Database connection established.';

?>

cpradio · June 15, 2012, 4:48pm

That might be a known bug https://bugs.php.net/bug.php?id=53185

Not sure there is much you can do about it.

logic_earth · June 15, 2012, 5:56pm

The invisible character you are refering to is the BOM, (Byte Order Mark). It is not coming from the error produced by PDO but rather most likely one of your files.

Teknikal_Tim · June 15, 2012, 10:11pm

Phew that was an easy fix. It was my notepad++ some how was set to utf-8 encoding and my script was encoded in utf-8 hence the BOM