<head> appears empty in Chrome

Asked 22/5, 2012 at 4:9 Answered 22/5, 2012 at 4:49

Solved php html character-encoding meta-tags html-head

When browsing my website with last version of Google Chrome, and using F12 to look into the source, all the content between <head> and </head> appears empty. On last versions of Firefox and IE, everything appears correcyly.

Actually the content is moved into the body on google Chrome.

It's obviously not a CSS problem. I'm using Twitter Bootstrap CSS and JS, and a MVC PHP framework. Someone has a hint?

Here is my document.html page:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title><?php echo (Template::$titre); ?></title>

<?php foreach(Template::$meta as $key=>$value): ?>
        <meta name="<?php echo $key; ?>" content="<?php echo $value; ?>" />
<?php endforeach; ?>

<link rel="shortcut icon" href="<?php echo WEB; ?>assets/style/favicon.ico" type="image/x-icon" />  

<link rel="stylesheet" href="<?php echo WEB; ?>assets/style/bootstrap.min.css" />   
<link rel="stylesheet" href="<?php echo WEB; ?>assets/style/bootstrap-responsive.min.css" />    
<link rel="stylesheet" href="<?php echo WEB; ?>assets/style/main.css" />    
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head> 
<body>
<?php require Template::child(); ?>
(...)

And the viewed source by Firebug:

<html lang="fr"><head></head><body>?


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Vélos d'occasion dans toute la France</title>
<meta name="keywords" content="velos d'occasion, velos dans toute la France, velos occasion Toute la france, velo occasion, velo">
<meta name="description" content="Petites annonces de velos d'occasion dans toute la France, velo d'occasion à vendre Toute la france">

<link rel="shortcut icon" href="/assets/style/favicon.ico" type="image/x-icon"> 

<link rel="stylesheet" href="/assets/style/bootstrap.min.css">  
<link rel="stylesheet" href="/assets/style/bootstrap-responsive.min.css">   
<link rel="stylesheet" href="/assets/style/main.css">   
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


<section id="maincontainer">
<div class="container">
(...)

Edit : Problem solved, Notepad++ was encoding in UTF8, I changed to ANSI and worked fine.

Mammilla answered 22/5, 2012 at 4:9 Comment(7)

It's probably caused by your code not closing <head> properly, could you post the viewed source output (Rather than php code)? – Northnortheast 22/5, 2012 at 4:11

It looks fine to me: imgur.com/Y3anC – Pergrim 22/5, 2012 at 4:12

@NiftyDude <head> is closed correctly in the non-PHP code in the OP. – Pergrim 22/5, 2012 at 4:12

@MahmoudAl-Qudsi : I actually didn't meant when viewing the source code, but when pressing F12 (I think it's a kind of Firebug by google). Besides, on Chrome, there is a white space at the top of the page + 2 scroll bars on the right and the bootstrap modal doesn't show correctly – Mammilla 22/5, 2012 at 4:16

@NiftyDude I updated the post with the viewed source by firebug – Mammilla 22/5, 2012 at 4:22

Hmmm...I see the whitespace you're talking about...only in chrome though...strange – Unsubstantial 22/5, 2012 at 4:42

You should update your title, since the <head> is clearly not empty, this is an issue of whitespace being rendered – Unsubstantial 22/5, 2012 at 4:43

You have some sort of malformed character at the start of your document.

I ran your page through the W3C validator and it shows:

Error Line 1, Column 1: Non-space characters found without seeing a doctype first. Expected <!DOCTYPE html>.

http://validator.w3.org/check?uri=http%3A%2F%2Fveloccasion.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

This appears to be causing Chrome to drop your doctype and render the page in Quirks mode, as you can see by the funny button and text field heights. Try deleting anything weird before the DOCTYPE (or removing the DOCTYPE and re-typing it)

Mojgan answered 22/5, 2012 at 4:49 Comment(4)

Or it could be the stupid Unicode BOM. Make sure your files are saved as UTF8 No BOM. – Desireah 22/5, 2012 at 4:55

Nice, problem solved ! Actually I am using Notepad++ and I was saving the page in UTF8 encoding. I changed to ANSI and rewrotte <!DOCTYPE html> and it worked fine. Thanks ! – Mammilla 22/5, 2012 at 4:56

Don't use ANSI, use UTF8 Without BOM. BOM is bad news, never use it. – Desireah 22/5, 2012 at 5:5

I was having same problem while using Notepad++. Using UTF8 without BOM option in Notepad++ is the correct solution to this problem. – Progeny 22/5, 2012 at 5:7

To build on Elijah's answer, use CTRL+U to view source on chrome and firefox.

I just checked on chrome and it is NOT empty.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>Veloccasion - V&eacute;los d'occasion dans toute la France</title>
<meta name="keywords" content="velos d'occasion, velos dans toute la France, velos occasion Toute la france, velo occasion, velo" />
<meta name="description" content="Petites annonces de velos d'occasion dans toute la France, velo d'occasion &agrave; vendre Toute la france" />
<meta name="author" content="Veloccasion.net" />

<link rel="shortcut icon" href="/assets/style/favicon.ico" type="image/x-icon" />   

<link rel="stylesheet" href="/assets/style/bootstrap.min.css" />    
<link rel="stylesheet" href="/assets/style/bootstrap-responsive.min.css" /> 
<link rel="stylesheet" href="/assets/style/main.css" /> 
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Unsubstantial answered 22/5, 2012 at 4:21 Comment(1)

But can you see the white space on the top when browsing with Chrome ? And the double scroll bar on the right. – Mammilla 22/5, 2012 at 4:25

F12 is not view source. F12 is the dom inspector. Is it possible that you're just seeing the head as collapsed? This is the way it's shown by default.

Edit:

Found your problem:

    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

That tag doesn't close. You need to end it with />

Edit:

Could it be that you need a space before /> on this line:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

Desireah answered 22/5, 2012 at 4:18 Comment(9)

No, I double checked, it was not collapsed, <head> is really empty, and you can see it displays badly on Chrome. Besides I checked with google Page Speed and it says I should put the CSS in the head, and define Charset in the head too, instead of the body – Mammilla 22/5, 2012 at 4:21

Well, I don't see what that has to do with anything. Does your site have a URL? – Desireah 22/5, 2012 at 4:22

Added the /> but didn't changed anything – Mammilla 22/5, 2012 at 4:30

No, I think it's coming from php, somewhere. I posted this question to see if it's a known issue, but apparently not so I'll dig into the php code. Thanks for trying – Mammilla 22/5, 2012 at 4:39

I assure you, it has nothing to do with php. – Desireah 22/5, 2012 at 4:42

I know it looks simple, but there might be a php problem somewhere, cause for example, I have this output image function : <img src="'.WEB.$method.'/'.$this->alpha().'.'.$this->extension.'" width="110px" height="80px" alt="'.$this->title.'"/> and when viewing in browser, it displays like that : <img width="110px" height="80px" alt="blabla" src="/small/Jd.jpg"> (In the opposite way ! The SRC should display first according to the php, but it's not ! So odd !) – Mammilla 22/5, 2012 at 4:48

Whatever you write out from php will appear in to the browser in the same order. If things could just move around randomly, any kind of sensible web development would be impossible. Remember, the display in the Webkit inspector or in Firebug is not the source. It may be rearranged a little. But the whatever PHP writes out is the actual source. – Desireah 22/5, 2012 at 5:2

Yes, in fact I had trouble some days ago with UTF8 and special french characters, and I read somewhere I should save my php files into UTF8 encoding. That's what I did, but created a lot of troubles. I realized I just needed to encode in UTF8 only the language file, and not all of my script ^^ – Mammilla 22/5, 2012 at 5:10

OK, just make sure you never ever use the BOM. Ever. – Desireah 22/5, 2012 at 5:14

I found it!

In chrome press CTRL+SHIFT+I,

...right after the <body> tag there is a line of lots of blank text. find that, and delete it and the whitespace goes away. Not sure what's causing it because I don't have your code.

Unsubstantial answered 22/5, 2012 at 4:45 Comment(3)

The HTML is exactly as I pasted in the question : no blanks, no spaces, I checked everything. I'll check into the php framework. – Mammilla 22/5, 2012 at 4:52

Sorry, but it is not. There is definitely a large whitespace which is what you see. I don't know why it's only in chrome but it is there. I was able to see it in the developer tools (ctrl+shift+i) right after the body tag. When I removed it, the whitespace disappeared. So I believe it is probably a PHP issue you should investigate. – Unsubstantial 22/5, 2012 at 4:54

I think that white space you see is added by Chrome in the dev tools only, as there is something else faulty with the code. I have the same issue. – Mizuki 30/7, 2013 at 18:40

-1

Hope it helps

the line below

<link href="http://fonts.googleapis.com/css?family=Lobster"
 rel="stylesheet" type="text/css

Notice the "?" in it try removing this line and view source

Athapaskan answered 22/5, 2012 at 4:26 Comment(4)

That line is the problem but there is nothing at all wrong with the '?' – Desireah 22/5, 2012 at 4:27

Use Double quotes for that line – Athapaskan 22/5, 2012 at 4:30

Yes, do use double quotes. But that is also not the real problem. – Desireah 22/5, 2012 at 4:32

I deleted that line, but didn't changed anything. I'll dig into php. – Mammilla 22/5, 2012 at 4:40

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags