You 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!