Diagnosing a white space issue at the top of the page - UTF-8 BOM

I had a frustrating issue on a site I’ve been working on where I was getting a block of white-space at the top of the web page. I made sure I had no padding or margin on my element and no margin on my page header causing it to sit lower than it should. [caption id=”attachment_343” align=”alignright” width=”139”]Notice the whitespace above the header and it highlighted in Firebug Notice the whitespace above the header and it highlighted in Firebug[/caption] When, inspecting the DOM in firebug, the white space could be clearly seen. It was not showing up, however, when I viewed the page source. After a decent amount of research, I came a useful post on Stack Overflow (http://stackoverflow.com/questions/10199355/php-include-causes-white-space-at-the-top-of-the-page). The issue turned out to be related to the file encoding. The header on my page was created in Notepad++ by one of my colleagues and it seems to have been saved in UTF-8 format with BOM (byte order mark) which is a signature at the start of the file. The BOM was invisible to me in my text editor - Sublime 2 but was being picked up by the browser when the header file was included in my template. Sublime 2 has a “Save with encoding” feature which allows you to save as UTF-8 with our without BOM. My solution was to simply Save with encoding > UTF-8. sublime