CODEWITHSUNDEEP
javascriptjquerycsshtml
user1016403
user1016403

Reputation: 12621

Incompatible IE Document Mode error in console?

I have below lines of code in my jsp page.

<!--[if lt IE 7]><html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if IE 7]><html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if IE 8]><html lang="en" class="no-js lt-ie10 lt-ie9" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if IE 9]><html lang="en" class="no-js lt-ie10" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if gt IE 9]><!--><html lang="en" class="no-js" xmlns="http://www.w3.org/1999/html" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <!--<![endif]-->

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>

  //some code

</html>

The code works fine in IE7 and all the browsers. But when i use IE9 it gives below the error in IE console and the page is not rendered.

LOG : Incompatible IE Document Mode

Please help me.

Thanks!

Upvotes: 1

Views: 688

Answers (1)

colestrode
colestrode

Reputation: 10668

The doctype must be the first line in your HTML file. You are also opening the HTML tag twice, once in each of your IE conditionals, and then once again below.

If you plan on supporting browsers other than IE, then wrapping the HTML tag with conditionals isn't a good solution because there is no way to define the HTML tag for other browsers as they will ignore the conditional comments.

One solution would be to add all the classes to the HTML tag, then conditionally import css files based on the version of IE. These files will define the classes you need based on the browser; for example ltIE7.css will define the .lt-ie7 class, ltIE8.css will define the .lt-ie8 class, etc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="ltIE7.css"/><![endif]-->
        <!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ltIE8.css"/><![endif]-->
        <!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="ltIE9.css"/><![endif]-->
        <!--[if lt IE 10]><link rel="stylesheet" type="text/css" href="ltIE10.css"/><![endif]-->
    </head>
    <body>
        ...
    </body>
</html>

Or, if you don't want to use external CSS files, you could define the classes inline using conditional comments in the head:

<style type="text/css">
    <!--[if lt IE 7]>
        .lt-ie7 {...}
    <![endif]-->
    <!--[if lt IE 8]>
        .lt-ie8 {...}
    <![endif]-->
    <!--[if lt IE 9]>
        .lt-ie9 {...}
    <![endif]-->
    <!--[if lt IE 10]>
        .lt-ie10 {...}
    <![endif]-->
</style>

Upvotes: 1

Related Questions