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 <body> element and no margin on my page header causing it to sit lower than it should.

Notice the whitespace above the header and it highlighted in Firebug

Notice the whitespace above the header and it highlighted in Firebug

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

Did you like this post? Why not subscribe?

Leave a Reply

Your email address will not be published. Required fields are marked *