Search code examples
htmlheaderfooterhtml-entitiesphp-include

PHP include() creates unwanted gaps in HTML

I have a document that includes a header (menu) and a footer in PHP:

<?php include('header.php'); ?>
<?php include('footer.php'); ?>

For some reason when opened on the browser it renders a gap between both without having any margins or CSS styles doing it:

HTML gap when using php include()

This is part of the code generated, the gap appears between </header><footer>:

<div class="ClearFloat"></div>
</nav>
</header><footer>
<div class="MainWrapper">
<ul>
<li>&copy; Copyright 2013</li>

If I inspect using firebug I do see a gap in the code:

</nav>
</header>

<footer>
<div class="MainWrapper">
<ul>

Furthermore if I try to edit the code in firebug I get a weird entity number where the gap appears: &#65279;:

</nav>
</header>&#65279;<footer>
<div class="MainWrapper">
<ul>

This has to do something with php because if I write the HTML of the header and the footer straight in the page the gap disappears:

HTML gap disappears when not using php include()

Any ideas? Thanks.

Solution

  • As Per Why is &#65279; appearing in my HTML?

    it may have a Simple Fix!

    The character in question &#65279 is the Unicode Character 'ZERO WIDTH NO-BREAK SPACE' (U+FEFF) attached to your code on a copy/paste or during a faulty Save its so simple to fix that, just open that file by notepad++ and step follow --> Encoding->Encode in UTF-8 without BOM. then save that. It work for me as well!