appears empty in Chrome

Question

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.

Interrobang · Accepted Answer

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)

d-_-b · Answer

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]-->

Okonomiyaki3000 · Answer

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

<head> appears empty in Chrome

Tags:

html

php

character-encoding

html-head

meta-tags

pimarc

3 Answers

Interrobang

d-_-b

Okonomiyaki3000

Recent Activity

Donate For Us