2

I've sumbled upon a problem that never occured before : A white space ( " " ) in the body element.

Obviously, that little thing is screwing with the whole layout, and on top of it, it's actually dumping the head's code into the body.

I.E :

Instead of having this (when the browser render the page):

<html>
    <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
            <script src="http://code.highcharts.com/highcharts.js"></script>
            <script src="http://code.highcharts.com/modules/exporting.js"></script>
            <script src="Scripts/json2.js"></script>

            <!-- Stylesheets -->
            <link rel="stylesheet" type="text/css"
            href="css/desktop.css" />
...
</head>

I have this :

<html>
    <head></head>
<body>
" " <!-- Here's the problem! -->
<! --Entire metas, scripts and whatnot is going here, too. 
Probably because of that white space! -->

I am literally puzzled as to what is causing the problem... I have been on the web for the past two hours, looking for every single link on google and stack overflow without much success...

Most suggestions that i found (but did not help me) were the following :

  • Problem with the encode of the file, or the meta tag itself. But this is not the case for me, because i made sure that all of my files were encoded with utf 8 (no BOM).

  • Random illegal char in the document. I have tried to find it by doing a speudo dichotomic search (deleting half the document, nothing found? Proceed with the other half) but still had the problem in both case.

  • Problem is coming from an external file. The only file that tamper with this one is also encoded in UTF 8 (no BOM) and does not present any illegal char.

If anybody have a suggestion as to how to fix this, i'd be grateful. Sadly, this is not my project, so i have limited capabilities to troubleshoot what's going on / cannot revert to an older state.

Also, there's no css involved in this (this is no mere padding or anything).

Here's a screenshot showing the problem :

Here's a pastebin of the raw content :

http://pastebin.com/tQthe5pv

Update : The source now has no whitespace before the doctype and is still doing the problem.

grg
  • 5,023
  • 3
  • 34
  • 50
zaedas99
  • 50
  • 7
  • 2
    Can you share the url? Try using the browser developer tools and see if there is any conflict. – malta Feb 10 '14 at 23:08
  • You are saying, that HTML file, which is saved on your server, is downloaded into the browser with different text content? Then the problem must be in your web server. Which web server do you use? – Ivan Kuckir Feb 10 '14 at 23:11
  • Wamp, but i don't have any problem with other projects. Only this one. I cannot share the URL since it's local. And no, it does not have different content because if i look at the **source**, everything's alright, but if i look at the developer console (in chrome, firefox, etc) it has all that stuff i mentioned above. – zaedas99 Feb 10 '14 at 23:14
  • 1
    Hm. I'm curious as to whether it is a space or something else. Could you look at it in a hex editor? – Wrikken Feb 10 '14 at 23:40
  • 2
    Also, best _not_ to look in develop tools at moments like this, they'll have a "fixed" DOM. Indeed, looking at the _raw_ source is where you'll find it. – Wrikken Feb 10 '14 at 23:41
  • 1
    Dumb question, you are closing your `head` tag, yes? It's just that you haven't shown that in your code! Also as suggested by @Wrikken, view the source as rendered to the browser and look over that. – Jon P Feb 10 '14 at 23:53
  • 1
    What @Wrikken said. There's really only one way this can happen. A character in the source has to make the HTML parser think that the body has started too soon. That character could be as simple as a non-breaking space. Opening the page in a hex editor will allow you to search for that character. – Alohci Feb 11 '14 at 00:35
  • Yes i did close my head tag... And the thing is (i'll repeat myself) the whitespace **does not** show up in the **raw source**. It only shows up in the developers tools and as soon as i delete it, the whole template display correctly. I'll try the hex editor and i'll add my closing head tag to prevent further answer based on that. – zaedas99 Feb 11 '14 at 14:10
  • Your first `` tag is not closed. – Raidri Feb 11 '14 at 14:15
  • @Raidri thanks, you got good eyes :). I fixed it but the problem remains. – zaedas99 Feb 11 '14 at 14:26
  • 1
    Can you copy & paste the raw source that's returned? I know that the space doesn't show, but people will have a hard time helping to debug from what Chrome has tried to correct your source to. – anotherdave Feb 11 '14 at 14:28
  • Okay sure, i'll post a pastebin in a few secs :). – zaedas99 Feb 11 '14 at 14:30
  • I'm sorry if the code is a mess (for those looking at the source). Sadly, it's not mine and i'm currently working on making it cleaner. – zaedas99 Feb 11 '14 at 14:41
  • 1
    @zaedas99 I think it's safe to say this has all of us stumped. Perhaps copy/paste the contents of the file that contains the ` ` to another file and replace the old file with the new one? You might want to copy a few chars after the beginning of the file, just in case, and manually type in those first few chars, just to ensure you don't unintentionally pick up any unprintable characters that might be there causing the problem. – ajp15243 Feb 11 '14 at 18:07

3 Answers3

1

Try to validate your HTML. For your local version http://validator.w3.org/#validate_by_input may help you.

If your code is valid, try to disable the Javascripts on your page one by one. Maybe some DOM-voodoo keeps messing up your code after loading the page.

Update: After getting the original code from http://pastebin.com/tQthe5pv, I can reproduce your error. By deleting all (whitespace-)characters before "<!DOCTYPE html>" the error was fixed. :)

fboes
  • 2,149
  • 16
  • 17
  • 1
    If you're going to check JavaScript as a potential source, it would be faster just to see if it is the culprit at all by disabling JavaScript in the browser. If the problem disappears, then disable scripts one by one. If the problem stays, you don't have to do the work of individually disabling scripts. – ajp15243 Feb 11 '14 at 14:31
  • Thanks for the post fboes! Sadly, doing what @ajp15243 said confirmed that the javascript is not involved in the problem – zaedas99 Feb 11 '14 at 14:40
  • Yep, I found the cause in your HTML (see post above) – fboes Feb 13 '14 at 12:58
1

Updated:

There is some whitespace(?) before the <!DOCTYPE html> at the start of the file. After removing this Chrome showed the correct page structure.

Also, but not the source of the error: According to your pastebin, the following tag is not closed:

<link href='http://fonts.googleapis.com/css?family=Anaheim' rel='stylesheet' type='text/css'>
Raidri
  • 17,258
  • 9
  • 62
  • 65
  • Well damn, i didn't see that closing tag either... That's actually weird, because that code was copy pasted from google itself (i never thought there would be an error in it!) Closing it though did not fix the problem (on my end) but i am unable to delete that white space before the . At least, netbeans is not showing it. Could it be code igniter that render it? – zaedas99 Feb 11 '14 at 14:46
  • 1
    The `` element doesn't necessarily have to be closed. See MDN's examples for [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link), which do not close it (i.e. ``). – ajp15243 Feb 11 '14 at 14:47
  • But wouldn't it be a bad practice to not close it? – zaedas99 Feb 11 '14 at 14:50
  • @zaedas99 In Chrome, if you do Ctrl+U (or right-click and View Page Source), which shows the raw source straight from the server before the browser processes it, does the whitespace before ` ` show? And yes, I would keep my ``s closed via `/>` as best practice. – ajp15243 Feb 11 '14 at 14:50
  • Not necessarily, but it is bad practise to mix closed and not-closed `` elements ^^ – Raidri Feb 11 '14 at 14:51
  • When copying the code from pastebin and opening the source in Chrome it shows 8 spaces and 3 ? at the beginning of the file. – Raidri Feb 11 '14 at 14:55
  • @ajp15243 yes, it shows up! Guess it's generated by something on the server side :/. I inspected the codeigniter code but found nothing that could produce a whitespace! – zaedas99 Feb 11 '14 at 14:56
  • 1
    @zaedas99 Googling for CodeIgniter and whitespace at beginning of page/output brought up either unrelated things or file encoding issues. Maybe double check that all of your files are actually encoded in UTF-8, instead of something like ANSI (something easy to mistakenly do if you're on Windows)? – ajp15243 Feb 11 '14 at 15:02
  • Hmmm, i'll check every files manually. I'll give you some feedback once i'm done! – zaedas99 Feb 11 '14 at 16:37
  • I encoded all of the remaining files to UTF8 without BOM (they were plain UTF8). I'm really at a lost here. I'm pretty sure it's CI who's causing this issue but it's nowhere to be found the code. – zaedas99 Feb 11 '14 at 17:09
0

This was a weird one, but here we go:

After troubleshooting for several hours at my job, i managed to isolate the problem. It was coming from a file named "database.php".

Apparently, each time a call was made to the database, some kind of illegal caracter was created inside the file (maybe due to bad encoding? I don't know, i'm pretty sure i encoded the file in utf-8 without bom, but whatever).

I fixed the problem by starting from scratch and copying every single line by hand. I haven't encountered the problem since.

zaedas99
  • 50
  • 7