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

952

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.

386

Answer

Solution:

Try removing the ?> in your functions.php file and no blank rows after the code. And is the functions.php in the same directory as the main file?

And just a tip, include a footer.php instead of file_get_content :-)

149

Answer

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 :).

30

Answer

Solution:

I had the same issue, on the console the source of the html looked like :

By checking the encoding some files were encoded with utf-8 with bom and some with big5. By saving those file to utf-8 ( without bom) solved the issue for me.

I have used Sublime Text 2 with the EncodingHelper from the package manager to see the current file encoding.

Hope it helps.

People are also looking for solutions to the problem: php - Ajax access into codeigniter controller

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.