Weird Issue with Chrome Inspect Element

Weird issue with Chrome inspect element

If you use the css below instead it should solve your problem.

#content{
    position: relative;
}
.page-company-profile .node .taxonomy_image_wrapper {
    position: absolute;
    left: 500px;
    top: 58px;
}

Strange element in Chrome Inspector causes layout problems

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

Issue with misaligned field on Chrome that goes away on Inspect

Instead of using <br />-s try to always use CSS for alignment, e.g. set the margin-top for label - label { display: block; margin-top: 15px }

Also it would be helpful to see the markup and CSS to solve your issue

Weird behavior in Chrome (misaligned elements that fix themselves when page is refreshed)

adding float left to your image will fix it.

#emblem{ 
    float: left
    // other styles
}

Chrome inconsistent Rendering elements with offset

It seems that svg fonts have a problem in chrome. As pointed out by commenter @Wesabi in this google group. I tested your link and changed font to a non-svg font and it seems working.

What caused your inconsistency within sessions is that sometimes the font is loaded before the calculation of elements and sometimes after depending in which order the requests comple@te.

The best solution would be to use Google Webfonts even when it makes the font look anti-aliased in chrome, it will default to another font-type.

Chrome also has problems rendering SVG fonts in select boxes for example. To see original question and bug report.

Original svg problem with select boxes

Google bug report

Weird Issue with Chrome Inspect Element