IE and HTML5 doctype issues
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">
Answer
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.