Recently, when I was working on a custom theme for WordPress, I ran into a very odd and annoying bug. The issue is there is an extra white space at the top of my page when it is opened on IE and Chrome, the white space piece is about 30px height and maximum width. Firefox doesn’t have any problem though. This is what it looks like:
Often, this issue is due to some margin-top is not set to 0px and likewise. But even if I removed all of the other parts of the page and left only the part which having issue there on the page, the white space is still there. Other efforts to force margin-top, padding-top to 0 didn’t make any difference. Then I tried to open the development tool on Chrome, I found out there is an unusual empty string right after the body tag, and all of the metadata in head tag was pushed into the body tag. There metadata resides in header.php file in WordPress structure but somehow it was not correctly put in the head tag this time. This is what’s in development tool:
In the above screenshot, when I right-clicked on the empty string and select “Edit as HTML”, there was a little red dot appeared and when I deleted it and exited edit mode. Woala!!! The white space disappeared! See the little red dot:
After that, with a little google search, I found out the solution is to encoding the functions.php file to “UTF8 without BOM” instead of “UTF8”. If that’s not fixing your issue, you can try to change the encoding of the other files in your theme directory such as header.php, index.php, footer.php, etc as well. As I develop theme in Vietnamese so I often put WordPress theme files into “UTF8” to ensure that Vietnamese texts look good. From now on, I will never forget to encode the files in “UTF8 without BOM” instead. Here’s more details about the issue from Alochi on stackoverflow regarding why the BOM character causes issue: “The byte sequence which is a BOM when it is the first bytes of a Unicode file is a “zero width no break space” character at any other place in the file. It’s therefore a printable character like a period or “ ” or “x” and if the parser sees it before body has started will simply assume that a <html> <head> and <body> tags not seen were simply omitted by the author of the page, since they are all optional in HTML.”
Lê Tấn Vũ's blog 