I've a page whose styling gets messed up in Chrome (no problem for Safari and others). It seems that it inserts for a reason some strange whitespace in the HTML that ruins my layout at the top of the page and in other places. If I choose to see the source of my PHP page, what I see is:
<body><div id="header-outer">
<div id="header" class="container">
<div class="row">
<div id="site-logo" class="span5">
<img src='logo.png' />
</div> ... etc ...
(I've modified the PHP to have no space whatsoever between BODY and DIV). But when I open the developer tools what I see is:
<body>
"" <- why?
<div id="header-outer> etc. etc..
If I manually delete the "", the layout just goes fine. What is happening here? I'm puzzled.
EDIT: I've tried to disable all extensions, but with no effect on my issue.
Hint: I'm using bootstrap and JQuery. Could they mess with the code?
It's really weird, you might have some undesired char within your file, try removing <body><div id="header-outer"> and rewrite it down.
Try encoding your file with utf8 No BOM too and see if it resolves the problem.
More infos about utf8 BOM here.