I'm experiencing a strange layout problem with Chrome which seems to be caused by an element that does not exist in the source code (
Ok, so I found the cause of the problem. It was the Java Play Framework that I`m using for this web application, but I could not think of this causing my problem.
The header code comes from a separate file (Scala View Template) and is inserted like this:
<head> <title>Logbook</title> @logbookContent.header() </head>
Although no text characters did exist between the
<script> tags in the header, the HTML validator always complained about text in the header section outside the
<title> element without displaying any invalid text (Thanks to Felix Kling for the validation hint).
So I tried moving the header code directly into the main page instead of rendering another file at that location. Et voilà, it works. No more "" in chrome and the layout of the page is as expected.
To find the difference between those to arts of getting the header code into my page, I saved both (rendered) websites and uploaded them to two different Diff tools. Both did not show any differences. But then I saw some strange looking chars in the output of one Diff tool for the version that causes Chrome to insert the "":
So obviously the Rendering Engine did insert some invalid (whitespace) characters that were not visible in Chrome or Notepad++, maybe because they support Unicode and the online Diff tool does not.
Update: These strange chars are the UTF8 BOM, which can be removed with Notepad++ (set encoding to "UTF8 without BOM")