PHP Include changes layout of HTML?_问答_开发者

This is my index.php:

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
include "top.html";
include "main.html";
include "bottom.html";
?>

Nothing special as you can see, and will be subject to change ;)

And this is my HTML code (don't mind the text, it makes no sense at all, I was just bored and wrote some blindtext myself)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title></title>
    </head> 
    <body>  
        <div id="container"> 
            <div id="header">
                <h1>Header</h1>
            </div>

            <div id="menu">
                <p>
                Link1
                Link2
                Link3
                Link4
                </p>
       开发者_C百科     </div>

            <div id="content">

        <!-- end of top.html -->

                <h2>Ernährungsphysiologische Bedeutung von Transfetten</h2>
                <p>
                Transfette, verdammt auf alle Ewigkeit, verschrien weil sie Krebs verursachen, verkannt, sind sie doch so nahrhaft, wertvoll und unersetzlich in unserer täglichen Ernährung.<br>
                Was die wenigsten Menschen wissen, ist, dass die Herstellung von Transfetten schon auf die Ureinwohner Sumatras zurückgreift, die in ihren Voodooritualen mithilfe von Schweinehaut diese Leckerei herstellten.
                Damals noch ein seltenes Gut, hauptsächlich innerhalb religiöser Riten verwendet, ist es auch noch heute eine Spezialität, die nur die wenigsten Gourmets unserer Zeit wirklich zu schätzen wissen.
                </p>
                <p>
                Doch wo kommen diese Transfette eigentlich her? Hauptsächlich werden sie heutzutage gewonnen indem man altes Fritierfett filtert und die alten Pommesreste aus dem Filter dann in eine Ölpresse wirft. Kaltgepresste Transfette sind dabei die seltensten aber auch gleichzeitig die schmackhaftesten Produkte, das Pommesöl ist natürlich auch gesund, aber existiert in so großen Mengen, dass man damit lieber seine Schweine füttern sollte, damit das Schnitzel auch ohne Bratfett in der Pfanne zubereitet werden kann.
                </p>
                <p>
                Haben wir sie überzeugt? Möchten sie Transfette in rauhen Mengen kaufen?<br />
                Schreiben sie uns! Wir freuen uns auf ihre Bestellung.
                </p>

        <!-- end of main.html -->

            </div>

            <div id="footer">
                this smells like footer
            </div>

        </div>
    </body>
</html>

So if I only include this whole thing as main.html and leave the other files blank, everything is fine, but when I split up the code (at the postitions I marked) into the designated files... Strange things happen.

A picture tells more than thousand words, so here you go:

PHP Include changes layout of HTML?

Any ideas?

according to the comments in the PHP manual this might be a file encoding problem. setting it to utf-8 should help.

It might have something to do with whitespace in the file, some times whitespace changes the way websites render, and that can happen when you include seprate files with PHP, it can cause extra whitespace in the source code of the HTML causing the render errors.

You structuring of your HTML document can become hard to manage. You do not need to call an include, which it shouldn't be.

error_reporting(E_ALL);
ini_set('display_errors', 1);

You should try calling:

error_reporting(0);

This will stop all error reporting which may prevent disruption with your template. But the ini_set was not necessary.

The important thing is to set the encoding of include files to UTF-8 WITHOUT BOM. Otherwise there's an invisible code added to the include file which the browser interprets as some white space resulting in a displaced layout.