Blank Space with PHP Include

closePlease note: This post was published over a year ago, so please be aware that its content may not be quite so accurate anymore. Also, the format of the site has changed since it was published, so please excuse any formatting issues.

Blank spaceYou might think that because I sit in front of a computer all day at work writing code, the last thing I want to do in my spare time is sit in front of a computer writing code. You would be wrong (apparently I’m a huge geek).

Over the weekend, I was playing around, trying to improve my skills as a PHP developer. Early in the project, I created some pages to be included in my index page using PHP’s include() function. They were pretty standard: a header, a content page, and a footer. Because I was just getting started, each included file simply contained its name (see the picture).

When I navigated to the index file, although the content pages loaded properly, there was a weird gap at the top of the page. I have recreated this weird gap for you in the picture so that you can clearly understand what I’m talking about.

At first I thought I had some extra white space in one of my files. Nope. I thought it might be white space in my index file, and although that didn’t make any sense, I removed all the extra white space anyway. That wasn’t it either. Was it a margin or some padding? A quick CSS reset proved that had nothing to do with it. I tried all sorts of different methods in an attempt to get the weird gap to disappear, but none availed me of my problem.

Finally I started commenting out the includes one at a time. I narrowed it down to my header file. I deleted everything out of the header file, but as long as the file was included – empty or not – it caused the weird gap. I was flummoxed. How was an empty file causing this problem?

On a whim, I decided to delete the file altogether and simply create a new one. I gave it the exact same file name, pasted in the contents of my previous header file, and uploaded it into the same directory. When I refreshed the index page, the weird gap had miraculously disappeared! But why? What had caused the gap to appear in the first place? The Internet yielded no results, so I started experimenting. It didn’t take long for me to find the culprit.

The IDE I use is Dreamweaver, and the key to this mystery lies in the “Save As” screen. On that screen, you are presented with several options besides where to save the file and what to call it. One of those options is a little checkbox that I had heretofore ignored: Include Unicode Signature (BOM). BOM is short for “Byte Order Mark,” which is 2 to 4 bytes at the beginning of a text file that identifies a file as Unicode, and if so, the byte order of the following bytes.

Personally, I prefer to use UTF-8 as the character encoding method for my web pages. I won’t get into all of the details about why UTF-8 is so great, but if you’re interested, this page does a very comprehensive job of explaining why you should consider using UTF-8. Moreover, the W3C says UTF-8 “is likely to be the best choice of encoding for most purposes.”

Now back to BOM. UTF-8 documents have no byte order, so adding a UTF-8 BOM is optional (it’s required for UTF-16 and UTF-32). Plus, in an HTML document, the character encoding is declared at the beginning of the document in a meta tag (you are declaring your character encoding, aren’t you?).

Somehow when I saved the header.php file, I must have accidentally checked the “Include Unicode Signature” box without realizing it. Those extra (and apparently invisible) bytes at the beginning of the file were causing a line break before its contents, thereby pushing everything down. It may have taken me over an hour to solve the problem and figure out why it happened in the first place, but now that I know, if it ever happens again, the problem will be solved in mere seconds. Hopefully this post will help other people solve the same problem than I did!

0 People like this. Be the first!

13 Comments

  1. I love you, man! 🙂

  2. You nailed the problem down in an hour? I envy you. Took me a couple of hours of madness – thinking that this must be some insane CSS bug. Google searched it to no avail, only after figuring out that it’s a character encoding problem and then solving it with good old trial and error did I find it’s a UTF-8 BOM issue.

    Once I modified my google search to include “bom” I found your page. Thanks for the in-depth explanation. 🙂

  3. pagod

    Good article :-). I just stumbled upon the same problem, luckily I have some experience with UTF-8 and related problems (and with UltraEdit and related bugs >:-(, e.g. that it will still add the BOM even if you explicitely say not to…) so it didn’t take me very long to figure out what the problem is. However, I’m concerned about the implications: I searched the net and found a bug report describing this very problem on bugs.php.net (here), however the server seems to be down (connection refused… means I can’t post there). You can still check the cached version on google here. This bug report is from 2003, but apparently this hasn’t been corrected yet in all this time! I’m using version 5.2.9 with Zend engine 2.2.0 on a linux server, and it most definitely still has the same problem!

    So I’m wondering what’s happening now? This is most definitely a PHP bug and not just a feature request, when are they going to correct it?!?

    Anyway, keep up the good posts! 🙂

    pagod

  4. pagod

    quick update: bugs.php.net is back and alive, I hadn’t seen the last line in the bug report that says the bug is going to be corrected in PHP 6.0… WTH?!?!?

  5. anonymous

    I want to thank you my friend for solving this problem. It was very difficult to find the solution and i spent many hours testing the CSS and swearing!

    Thank you

    Just a man

  6. Anthony

    Thank you so much! This is exactly what I needed. I can’t believe it took so long to find the answer!

  7. Al

    Wow, thanks posting this, I spent hours researching this issue, and lucky still have some hair left. One thing though is that I find I was only able to save after unchecking the “Include Unicode Signature (BOM)” within the preferences section otherwise, even if I uncheck that option in the “save as” dialog box it still checks it!

  8. The Swede

    THANKYOU THANKYOU

  9. You have NO idea how much I appreciate this post. I have been struggling with this for almost three days now (I am not a professional website designer). I recently migrated my website from MS Expression Web 2 to 3 and that’s when everything started going haywire. I haven’t even tried this fix but I already know this is the problem. Thanks again!

  10. Caglar Cataloglu

    Thanks for your great post! That utf-8 bom is also making problems within php functions after publishing website into a live server; especially if you are using notepad++ while developing websites. So pay attention : )

  11. carolina

    thanks a lot !!

  12. Johnny

    What I found in my situation is that not only I have to uncheck that checkbox at Save As, I also have to uncheck another checkbox in the Page Properties + Title/Encoding dialog box, in order to eliminate the white space. I am using DW CS2.

    Thank you very much for your excellent post! Without it I would still be pulling my hair off.

  13. Gabriel

    Thanks a lot !!!

    I’ve been weeks watching the blank space at the beginning of the page and did not understand what was happening.

    Great !

Leave a Reply