Search code examples
htmlgoogle-chromeplayframeworkplayframework-2.0double-quotes

Strange "" element in Chrome Inspector causes layout problems

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 ("" directly after <body> tag).

Have a look at this screenshot: Size of body element

The body element is located at the top of the page. The first content element of the page (entries_col) however has an offset of about 15px: Offset of first element

Of course I've checked paddings and margins - the problem can be resolved by deleting the "" element in the DOM Inspector manually (red circle in the second screenshot). I have found out that Chrome shows whitespace with the quote marks, but the source code looks like this:

</head><body><div id="entries_col">

Could someone please tell me how to get rid of this empty line above the page content? (Or: where does the "" come from?)

Thanks!

Solution

  • 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 <meta> and <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 "":

    <head><title>Logbook</title><meta http-e

    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")