Unicode characters at top of page causing gap in WebMatrix

Question

I am working on a simplistic website using PHP, a language I haven't touched in a long time, especially when it's running on a Windows system from WebMatrix. Lately I've been porting a couple of websites from ASP.NET (Umbraco) to PHP to a basic templating class written in PHP, and so far things have been going fairly well, until some unicode characters started appearing in my source before the DOCTYPE. The Mozilla source checker doesn't show these, but when posted into Notepad two unicode boxes/characters are shown.

I have looked at the problem in Firebug and it seems to believe that all JavaScript is running within the body tag, even though a quick look at the source code shows that this is not the case.

The same source code works perfectly when run in ASP.NET from WebMatrix, but this revised website using the code below in PHP doesn't want to work properly. Here is the code I am using, starting with a typical page file.

<?php
include "./template.class.php";

$content = "<p>Test.</p>";

$template = new Template;
$template->load("./design.php");
$template->replace("title", "Title");
$template->replace("ContentTitle", "Test");
$template->replace("PageContent", $content);
$template->publish();
?>

Here is the template class I am using.

<?php
class Template {
    var $template;

    function load($filepath) {
        $this->template = file_get_contents($filepath);
    }

    function replace($var, $content) {
        $this->template = str_replace("@$var@", $content, $this->template);
    }

    function publish() {
        eval("?>".$this->template."<?");
    }
}
?>

As shown, the design page is used for each page, with the necessary fields listed with the at-symbol (e.g. <title>@title@</title>).

I am fairly sure that the CSS and HTML isn't to blame as I am using what is largely the same code on other websites with no problems whatsoever.

---

EDIT: The problem has been discovered, but in doing so it's shown that editing PHP files in the new WebMatrix editor from Microsoft will continuously cause the Byte Order Mark to appear when a PHP file is saved. As mentioned already Notepad++ is extremely efficient at sorting this problem out and if you have the same problem open all necessary files and go to Encoding in the top menu and click "Convert to UTF-8 without BOM". Once saved the problem should disappear.

I'm of the opinion that this is a valid bug in the WebMatrix tool, and I'd be more than happy to submit the bug if my company Internet wasn't restricted when it comes to Windows Live. If you do happen to see it posted as a bug or do so yourself then please comment on this post as even with its flaws the WebMatrix tool is a fantastic little editor for ASP.NET Razor and PHP.

Answer 1

This is most likely a BOM. Try to find the file that prepends it (it could be one of the PHP includes) and set your editor to save the files without it.

See this question for a number of approaches to remove it.

Answer 2

That is called a byte-order mark (BOM). It is completely unnecessary for UTF-8, but Windows system like to add it to the beginning of a file.

You can remove it in a good editor either by using an option ("UTF-8 without BOM") or in hex view by deleting the character (3 bytes).