Member Avatar for Kligham

Hi,

I have a html file Top.htm:

<form action="" method="post">
    <fieldset>
        <input id="searchbox" type="text" name="zoekfunctie" value="Zoek..." />
        <input type="submit" name="zoekbutton" value="Zoek" />
    </fieldset>
</form>

I then include this page in my index page (and in many more pages to come):

<div id="top">
        <?php
            include("Top.htm");
        ?>
    </div>

Now the problem is that, for wathever reason there may be, an empty line gets inserted above the html form: Here. However, when I don't include the code, but I just put it in the index page:

<div id="top">
        <form action="" method="post">
            <fieldset>
                <input id="searchbox" type="text" name="zoekfunctie" value="Zoek..." />
                <input type="submit" name="zoekbutton" value="Zoek" />
            </fieldset>
        </form>
    </div>

Than it looks like this: Here

This is the case with every browser. Does anyone has an idea what the problem is, and how to solve it?

Thank you

  • 3 Contributors
  • 11 Replies
  • 194 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by Kligham

Dani AI

Generated

Most likely cause: invisible bytes or stray whitespace at the very start of the included file (a UTF-8 BOM is the common culprit). 's BOM suggestion and 's confirmatory re-save are consistent with that, and ' advice to inspect the HTML helped reveal the extra text node the inspector shows even though "view source" looks normal.

How to confirm quickly:

  • Open the file in a hex-aware tool or run a quick hex dump to see the first bytes. For example:
hexdump -C Top.htm | head -n1
xxd Top.htm | head -n1

If you see the byte sequence EF BB BF at the start, that's the UTF-8 BOM.

How to fix:

  • Resave the partial as "UTF-8 without BOM" (Notepad++: Encoding -> Convert to UTF-8 (without BOM); VS Code: Save with Encoding -> UTF-8).
  • Make sure there are no blank lines or spaces before the first tag.
  • If you use PHP files for includes, avoid the closing ?> on pure-PHP files to prevent accidental trailing whitespace being sent.

If you cannot change the include immediately, you can strip leading whitespace at runtime using output buffering:

ob_start();
include 'Top.htm';
echo ltrim(ob_get_clean());

Quick checklist: remove BOM, re-save in correct encoding, remove any leading blank lines, clear browser/server caches, and re-test. If the line remains, inspect the included file with a hex dump and share the first few bytes so the exact cause can be confirmed.

Recommended Answers

All 11 Replies

Member Avatar for matt_platts

Both of these pages look identical to me in chrome. However the code you have posted isn't present in the source code of either, would that be because Im not logged in?

Member Avatar for Member #120589

Perhaps if you showed some screenshots of the problem? Looks the same to me as well.

Member Avatar for Kligham

I've added new images, now in attachments: notice the extra line marked with a red circle. I hope you now understand what I want to say. The first picture is the one with the include.

Include.png 56.46 KB NoInclude.png 53.78 KB
Edited by Kligham because: n/a
Member Avatar for Member #120589

From the link you gave this is what I see:


Doesn't look anything like the screenshot you posted!

Screenshot_2.png 46.57 KB
Member Avatar for Kligham

From the link you gave this is what I see:

Doesn't look anything like the screenshot you posted!

My apologies, but the link works apparently only for me (because I was logged in at the site). So again my apologies for that, however the correct images were uploaded in the previous reply and now again.

Include.png 56.46 KB NoInclude.png 53.78 KB
Member Avatar for matt_platts

Have a look at the html source code and see what's creeping in.

Member Avatar for Member #120589

Yes sounds odd. Is your htm file completely empty except for the form itself? It shouldn't have a doctype declaration / body tag or anything else, right?

Member Avatar for Kligham

Have a look at the html source code and see what's creeping in.

The source code doesn't show anything weird. So I can't notice any empty line insertion. However I uploaded two pics: one with firebug and one with the chrome element inspector. In chrome it shows a " " between the div and the form element. And in firebug an empty line.

Chrome.png 668.58 KB Firefox_firebug.png 437.76 KB
Member Avatar for Kligham

Yes sounds odd. Is your htm file completely empty except for the form itself? It shouldn't have a doctype declaration / body tag or anything else, right?

Yes, it is completely empty.

Member Avatar for Member #120589

Well, seems to me as if you've got some sort of output before the form. I suggest that you create a new txt file and hand type the code again. Save it.
Only the form markup should be placed in it - absolutely nothing else. Some text editors save a 'BOM' as a header in the text file. If you're able in your editor, ensure that you 'encode in UTF-8 without BOM'.

I once had display problems due to BOMs being present (usually invisible in the text editor). Drove me absolutely nuts for days.

Member Avatar for Kligham

Well, seems to me as if you've got some sort of output before the form. I suggest that you create a new txt file and hand type the code again. Save it.
Only the form markup should be placed in it - absolutely nothing else. Some text editors save a 'BOM' as a header in the text file. If you're able in your editor, ensure that you 'encode in UTF-8 without BOM'.

I once had display problems due to BOMs being present (usually invisible in the text editor). Drove me absolutely nuts for days.

Thank you very much. I rewrote it in notepad and it now works as expected!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.