Search code examples
phpphp-include

Random whitespace in a PHP page (the client received page, but not the client-received source-code), but only when I use an include()

Ok, I am having the weirdest problem in history. I am making a website that works perfectly in HTML, but is having some REALLY odd behaviour when rendered from PHP - despite having the EXACT SAME client source code (I literally went through it character by character).

At first I thought I'd messed up something in my 'functions.php' file that I'm including, but I don't get any errors, and when I copy&paste the contents of that file into the place where the include('functions.php'); line is, the problem disappears.

Here's my code (with some HTML removed, this is all of the PHP):

<?php
    error_reporting(E_ALL);
    ini_set('display_errors','1');
    include 'functions.php';
    $footer = file_get_contents('footer.txt');
?>
<!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="X-UA-Compatible" content="IE=edge" />
    <title>Removed</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <link type="text/css" rel="stylesheet" href="css/jquery-ui-custom.css" />
    <link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
    <div id="header">
        <div id="headerContent">
        <div id="logo">
            &nbsp;
        </div>
<?php
    echo trim(GetNav());
?>
        </div>
    </div>
    <div id="content">
<?php
    $NumberOfNewsItems = 2;
    echo trim(GetNews($NumberOfNewsItems));
?>
    </div>
<?php
    echo trim($footer);
?>

</body>
</html>

The functions GetNav and GetNews grab info from the database so I'm not going to show the code from them, plus, as I mentioned earlier, if I don't include the file but instead copy it's contents to the place I make the include call then most of the whitespace disappears (there's still some where the 'echo $footer' call is.

Basically, when you look at the source code, everything looks fine. Where stuff gets incredibly strange is when you hit F12 to look at the dev tools and the elements tab shows a whole bunch of extra whitespace (surrounded by double quotes) immediately after the tag (which impacts the look of the site) as well as between the footer and content Divs (which again, impacts the look of the site).

Also in this view, all of the tags from the are below the first set of white-space and the tag is empty (eg: <head></head>).

The source code looks fine (and if I copy and paste the source code into a HTML file it works flawlessly) and I have to admit that this has me tearing my hair out.

Please help me Obi-Wan-Kenobi, you're my only hope (yes, I love Star Wars, although I wish they'd made more than three movies).

P.S. This might be mega-obvious, but I'm a .Net developer doing this for a family member in my spare time (also it's fun to learn new languages, even ones overly fond of the $ sign), so apologies in advance if I'm the world's biggest newb.

EDIT: What I see in the dev tools is this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
"



      "
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Removed</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <link type="text/css" rel="stylesheet" href="css/jquery-ui-custom.css" />
    <link type="text/css" rel="stylesheet" href="css/main.css" />

Etc.

EDIT2: Just to be clear, I don't care what the dev tools show, it's just that I'm getting whitespace showing where those quotes are on the actual website, other than that everything is perfect.

EDIT3: Also, the whitespace cannot be clicked on with the element selector and selecting the whitespace in the element tab does not highlight anything on the website. Deleting it in the element tab however DOES fix the website (until it is reloaded obviously), but obviously doesn't help me with my problem.

Solution

  • I wasn't able to fix this in a way that satisfies me, but here's the workaround that I implemented:

    I removed the include from the header entirely and broke up functions.php into one file per function and just included them where they needed to be called.

    This alleviated my problem, although it's not ideal. Glad I don't have to use PHP on a daily basis :).