Search code examples
cssheaderinternet-explorer-9

IE9 not display correctly, is my html header correct?

I ask this because I don't know why in IE9 my site looks like this:

enter image description here

And another broswers display correctly:

enter image description here

I was assuming it was due to poor position in the header files but not exactly this happening and that's the last part of my project, it looks good in IE9.

General structure of my index.php

<!DOCTYPE html>
<html lang="es">
<head>
    <?php include 'configHead.php' ?>
    <title>Panel de Servicio</title>
</head>
<body>
.......
</body>

configHead.php

<meta charset="utf-8">
<link rel="shortcut icon" href="media/favicon.png" />
<script src="js/prefixfree.min.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css" type="text/css"/>
<link rel="stylesheet" href="css/jquery.dataTables.css" type="text/css"/>

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
<script src="js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>

Anyone have any idea why this happens?

Solution

  • You cannot have any comments or any text above your <!DOCTYPE html> ... remove the comment on top and your site will work fine in IE .. Its currently triggering your page to go into quirks mode (which is roughly equivalent to IE5) .. as far as IE is concerned you have no doctype.

    Right now you have this comment:

    <!--Aplicación: Sistema de tickets y pólizas.
Cliente: MA Consulting.
Desarrollador: XXX XXX XXX
Twitter: @_xxx
Email: xxx@gmail.com
Fecha: Julio/2012 - Febrero/2013
-->

<!DOCTYPE html>

    Before your doctype .. move that comment after <!DOCTYPE html>