PHP include causes white space at the top of the page

Question

I have a problem on a site that I am making. There is this line of white space at the top of my page. I can not find out where it is coming from. It might be because of extra line breaks in my page thanks to php include() or maybe it is just some faulty css.

but as you said, since you have php code too, please provide it too! — hjpotter92, Apr 17 '12 at 21:27

Daniel Node.js · Accepted Answer · 2012-04-18T15:03:54.473

41

I got it! I must admit, this was a very strange one.

This was my exact problem, and his solution fixed it perfectly.

The problem was because of the include().

When you save a page as UTF-8, a special signature called a byte-order mark (or BOM) is included at the beginning of the file, indicating that it is a UTF-8 file. You can only see BOMs with low level text editors (such as DOS edit). You need to remove this signature from the included file in order to get rid of the white space at the top of the page.

DOS edit

edited Apr 18 '12 at 15:03

answered Apr 17 '12 at 23:01

Daniel Node.js

6,734
9
35
57

This signature is known as a byte-order mark, or BOM. It's a PHP developer's worst nightmare but also potentially affects just about any other UTF-8 file. – BoltClock Apr 17 '12 at 23:43
in mac just create a utf8 file and copy paste the text. The new file will be free from this BOM. – iluvatar_GR May 31 '15 at 09:49
The Notepad++ saved my life when it came to this - just select UTF-8 from the encoding menu. They have bom UTF-8 types but the UTF-8 from the encoding menu doesnt include bom. – Michael Cantrall Aug 22 '18 at 18:49

score 14 · Answer 2 · answered May 18 '13 at 14:55

14

In Notepad++ you can change the encoding of the file to "UTF-8 without BOM" from the "Encoding" menu. This fixes the problem for me.

answered May 18 '13 at 14:55

Bruno

1,213
13
14

Not for me, I changed to Latin1 with Unix EOL and the *only* thing that worked was removing the closing ?> from the included file. In fact judicious use of printf() showed the spaces inserted at the interface of the included file and the main body. – mckenzm Dec 10 '14 at 19:04

score 10 · Answer 3 · edited Jan 23 '14 at 22:53

10

Open file in Notepadd++
From top bar: Encoding->Encode in UTF8 without BOM
Save the file

In Dreamweaver

Press CTRL + J or go to Change->Page Settings->Tile/Encoding and unchek UNICODE BOM if it is cheked.

edited Jan 23 '14 at 22:53

sashkello

17,306
24
81
109

answered Jan 23 '14 at 22:31

Victor Sitnic

380
2
6

score 4 · Answer 4 · edited Apr 17 '12 at 23:28

4

Well you're missing a DOCTYPE for starters... You also don't have a character encoding specified.

Aside from that, make sure that if you've saved the files as UTF-8, they must not have a BOM at the start. Also ensure that you didn't leave any empty lines (although whitespace is probably ignored, otherwise every layout I've ever written would break)

edited Apr 17 '12 at 23:28

0b10011

18,397
4
65
86

answered Apr 17 '12 at 21:27

Niet the Dark Absol

320,036
81
464
592

score 3 · Answer 5 · answered Apr 17 '12 at 21:25

3

For some reason after your body tag before the first div you have some funky character... just delete them and re-indent as needed. the character  to be precise... (you can see it in Firebug if you inspect the HTML for the page...but you can't see it in the view-source because it renders as whitespace).

unrelated to the alignment issue... you also have a miss-matched closing </li> tag after your login/signup link.

answered Apr 17 '12 at 21:25

scunliffe

62,582
25
126
161

Wow. that was fast. But unfortunately, I didn't put that character into my page, therefore I can't delete it. Do you have any suggestions? Oh, and thanks, I fixed that miss-matched ``. – Daniel Node.js Apr 17 '12 at 21:44
sorry for the delay, but I'm guessing you solved it?.. I don't see the extra character there any more. – scunliffe Apr 18 '12 at 00:20
Yes. see my answer. I removed the character. – Daniel Node.js Apr 18 '12 at 14:54

score 3 · Answer 6 · edited Jan 16 '13 at 16:10

3

you can solve this problem doing the following...

based in what scunliffe said... you can avoid this character... example

$file = file_get_contents('header.php');
$file = substr($file, 3, strlen($file));
echo $file;

so, you're skipping this bug...

regards

edited Jan 16 '13 at 16:10

Philippe Boissonneault

3,949
3
26
33

answered Jan 16 '13 at 15:44

cebasso

31
1

verrrrrrrrrrrrrrrrrrrrrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyy tanX ... Goooooood way ... solved for me ... ^_____________________________^ taaaaaaaaaaaaaaaaaaaaanX – Erfan Safarpoor Dec 17 '14 at 19:42

score 3 · Answer 7 · answered Oct 10 '14 at 09:24

3

Important: If you have multiple php pages as I have in my website using utf-8, you need to make sure you change the encoding of every single page to be "Encode in utf-8 without a BOM".

answered Oct 10 '14 at 09:24

hagai shaul

35
1
5

score 1 · Answer 8 · answered Apr 17 '12 at 21:24

1

Yep, there's extra whitespace included before anything else.

May I recommend the use of output buffering to you? You will gain a fine grained control of what is pushed to the client.

answered Apr 17 '12 at 21:24

aefxx

24,835
6
45
55

score 0 · Answer 9 · answered Apr 17 '12 at 21:39

0

After you declare a DOCTYPE make sure to add CSS reset into the first line of your CSS code to make it consistent across all browsers :

*{margin:0;
 padding:0;
 }

answered Apr 17 '12 at 21:39

Dejo Dekic

2,088
4
27
50

score 0 · Answer 10 · answered Apr 17 '12 at 21:51

0

While reviewing your website output on firebug, i found small issue on top of html rendering. view in screen shot. firebug report

It may be due to missing doctype on top of page. Add the following doctype on top of page and see output again.

<!doctype html>
<html itemtype="http://schema.org/WebPage" xmlns="http://www.w3.org/1999/xhtml"   xmlns:og='http://opengraphprotocol.org/schema/'
xmlns:fb='http://www.facebook.com/2008/fbml'>

answered Apr 17 '12 at 21:51

irfanmcsd

6,533
7
38
53

k. got the doctype. Is it still doing it? – Daniel Node.js Apr 17 '12 at 21:56
may be problem in your php rendering. there is no issue in css or in your html. – irfanmcsd Apr 17 '12 at 22:05
when i saved your page as html and test it, it shows no error and page output shows correctly. – irfanmcsd Apr 17 '12 at 22:12

score 0 · Answer 11 · answered Oct 10 '16 at 16:51

0

Tested all suggestion online, solved with notepad, procedure :

Copy all content of the file to include, from php without <?
Open Notepad and type <? then paste all code
Enjoy

answered Oct 10 '16 at 16:51

Leonardo Ciaccio

2,846
1
15
17

score 0 · Answer 12 · answered Sep 06 '17 at 02:18

This problem has also bothered me for a long time, until I found a very simple solution.

This problem is caused by a BOM character, which is used to tell code page and which endian is of a text file. When you include a PHP file, this character will be included as well. Although you will not see the BOM character, but it might cause gap on your page.

My solution is here. You don't have to remove this character from files. What you have to do is like this:

<!-- <?php
include_once (dirname(__FILE__) . "/_include.php");
?> -->

Using HTML comment mark to wrap php code which includes other php files. And the BOM character will be considered as comment and will not appear on page.

score 0 · Answer 13 · answered Dec 06 '17 at 13:29

BOM Character creates that problem. Sometimes it does not create such visual character that one see. Just check the file editor settings and set to "no BOM" to prevent such blank line.

Sometimes images won't work because of this character, since the character set of image is corrupted by such character.

To avoid such situations, i). check if your Code Editor creates new file with BOM. If so, change this setting. ii). Open all the files of your code and check BOM character at start (

score 0 · Answer 14 · answered Dec 11 '17 at 06:24

0

Try this this is the best idea that I know, cheers

<div style="position:absolute;">
<?php include("conn.php"); ?>
</div>
<!DOCTYPE html>

answered Dec 11 '17 at 06:24

deibu

1
3

score 0 · Answer 15 · edited Aug 12 '18 at 16:05

0

I just downloaded Notepad++ and should advise UTF-8 without BOM is not an encoding option. Choose only "UTF-8" not the "UTF-8 BOM". That worked.

edited Aug 12 '18 at 16:05

giusti

3,156
3
29
44

answered Aug 12 '18 at 13:34

Mauro S

46
5

PHP include causes white space at the top of the page

15 Answers15

Linked