IE and HTML5 doctype issues

M

8

13

I'm using the great HTML5 boilerplate. It's a great project but I'm having some big issues rendering in IE 8 and 7 (possibly 8 but haven't tried yet)

The files have the HTML5 doctype:

<!doctype html>
<head>

But the problem is that having no full and ugly doctype like...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

I get all kind of rendering issues: centering by margin:auto doesn't work, heights, widths, martings and paddings all behave like crazy and all my layout is broken with just <!doctype> but if I switch to the old one, everything works great (well, not great, it's still IE, but as expected)

HTML5 Boilerplate comes with Modernizer which I think should fix this but it's not working. From my "research" (Google) I found that IE enters in quirks mode width <!doctype>, so the question is...

Is there a way to prevent IE going into quirks mode with <!doctype>?

Or at least not to break margins, widths, paddings, etc?

Edit: This is the full head:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

Macaw answered 13/2, 2012 at 18:4 Comment(1)

What was the solution for this question? – Ruhl 28/8, 2013 at 20:0

C

16

IE does not go into quirks mode with that doctype. The boilerplate should be fixing IE problems, not causing them. You are missing the <html> element after the doctype. Add that to see if things change. HTML5 does not require it but, if missing, either IE or boilerplate may go crazy according to the docs.

Also, just remove the comments after the doctype and that should make the problem go away.

Coruscation answered 13/2, 2012 at 18:19 Comment(4)

i'm not missing it, the boilerplate has it: < html class="no-js" lang="es" > – Macaw 13/2, 2012 at 18:31

@Juan - Then we need to see the complete markup cause we're just guessing. – Coruscation 13/2, 2012 at 18:33

What was the actual solution from this answer? – Selfanalysis 11/7, 2013 at 14:18

Removing the commented versions of the html and leaving plain <!DOCTYPE html> <html lang="es"> <head> – Macaw 29/8, 2013 at 16:0

B

11

Try putting this in the <head></head> tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

If it's already there, then remove it, and you may receive your desired results.

Basketry answered 13/2, 2012 at 18:13 Comment(1)

it's there, I removed it but nothing changed – Macaw 13/2, 2012 at 18:19

C

8

IE doesn't go into quirks with the HTML doctype - that's the whole point!

What's nice about this new DOCTYPE, especially, is that all current browsers (IE, FF, Opera, Safari) will look at it and switch the content into standards mode - even though they don't implement HTML5. This means that you could start writing your web pages using HTML5 today and have them last for a very, very, long time.

(http://ejohn.org/blog/html5-doctype/)

However, having anything before the doctype (newlines, comments etc) will.

I'd check what you are doing - the HTML5 doctype will not put your browser into quirks.

Cannibal answered 13/2, 2012 at 19:0 Comment(0)

R

1

Try save file as UTF-8 without BOM. It helped me.

Redfin answered 17/10, 2014 at 13:5 Comment(1)

This helped me, there was something being written before doctype declaration, and IE edge was assuming I didnt had a doctype, thus messing the final result greatly. – Extrabold 20/6, 2018 at 17:31

T

0

I'm not too much of a "wiz", but wouldn't it work to do conditional html and declare an HTML 4.01 doctype for IE8 and below like this:

<!-- HTML 5 doctype -->
<!doctype html>

<!-- HTML 4.01 Doctype -->
<!--[if lte IE 8]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<![endif]-->

If that does not work in older browsers (due to the browser reading two doctypes) you could try this:

<!DOCTYPE HTML <!--[if lte IE 8]>PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
<![endif]-->>

Tiffinytiffy answered 13/2, 2012 at 18:16 Comment(1)

Your comment DOES put IE into quirks mode. You can't put anything in front of the doctype. – Coruscation 13/2, 2012 at 18:21

R

0

It is likely it is going into compatibility mode with the conditional comments. We recommend that you set the x-ua-compatible header server side within a .htaccess file or other server config files.

Reputation answered 16/2, 2012 at 14:45 Comment(0)

A

0

I see nothing wrong with the full head markup you posted. This is a standard markup widely used in boilerplates that include Modernizr, a nifty JavaScript library used to detect browser features.

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>

I use it in my current app and get no problems on any browser. Though I use it like so:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>

For the sake of testing the IE conditional comments, I tested on IE9, IE8 and IE7, with both the uppercase and lowercase doctype, just for double-checking.

The only odd thing I have observed on IE7 was that webfonts (all four in my app) would fail to render sometimes, when I used <!doctype html> instead of <!DOCTYPE html>.

FYI: I've just checked and see that the HTML5 Boilerplate Project has removed support for IE conditional comments on Sept 24th 2013. I can't confirm when conditional comments were introduced to the project but can see that it used to be around the body tag when the project was ported to Github on Jan 24th 2010.

Alliterate answered 16/1, 2014 at 15:55 Comment(0)

G

-4

try DOCTYPE html instead of doctype html doctype tag is case sensitive, this would be the reason.

Gigantes answered 1/3, 2013 at 7:41 Comment(0)

Recommended topics

Hot tags