Link to home
Start Free TrialLog in
Avatar of rascal
rascalFlag for United States of America

asked on

HTML5 - Comment breaks page!

We are building an HTML5 site but have encountered a crazy bug - any html comment we insert in the page breaks the page - the entire page is blank upon display in IE9. It doesn't happen in other browsers, but in IE, any comment inserted within the body of our HTML5 page totally blanks out the entire page (you can view->source to see the entire code is there, but the display page is completely blank).

Does anyone know why this happens on IE9 and what can be done to get around it?

Thanks!
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

we need the link.

do you have the correct doctype?
Avatar of kaufmed
Did you correctly close the comment?
Avatar of rascal

ASKER

The site is still just on our test server so I can't provide a link at the moment, but the doctype is html5 (see below)

<!DOCTYPE html>
without seeing any of the code it's impossible to help.

make sure all your elements are opened and closed correctly.
Can you post rendered HTML here?
Avatar of rascal

ASKER

Below is the code - you will see the comment tag called <!-- test --> within the source. When viewed in IE9, this page is completely blank. Remove the <!-- test --> comment and the page appears.


<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<meta name="Keywords" content="2">
<meta name="Description" content="3">
<!--[if lt IE 9]>
<script src="/include/html5shiv.js"></script>
<![endif]-->
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="JavaScript" type="text/javascript" src="/include/commonfunctions.js"></script>
<script src="http://www.google.com/jsapi"></script>
<script language="JavaScript" type="text/javascript" src="/include/jqueryloader.js"></script>
<SCRIPT type=text/javascript>
//<![CDATA[
$(document).ready(function()
{
	
	if (typeof(CustomPageInit) == 'function')
	{
		CustomPageInit();
	}

}); // $(document).ready(function()
</SCRIPT>
<script language="JavaScript" type="text/javascript">
<!--
//*********************************
// CustomPageInit
//*********************************
function CustomPageInit()
{
}
</script>
<link href='http://fonts.googleapis.com/css?family=Noticia+Text:400,700' rel='stylesheet' type='text/css'>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" media="screen">
<link rel="shortcut icon" href="" type="image/x-icon" />
</head>
<body>
<div class="wrapper">
  <div class="main">
    <header><a href="http://p4l.test.com/"><img src="../graphics/common/logo.gif" alt="Test For Learning" width="246" height="124"  /></a>
      <div class="header-content clearfix">
        <ul>
          <li class="header-mission"> BUILDING AWARENESS, UNDERSTANDING<br>
            AND DEMAND FOR EDUCATION REFORM </li>
          
		  		            		  
		            <li class="header-contact"> <a href="/aboutus/contact.php">CONTACT US</a> </li>
        </ul>
      </div>
    </header>
    <nav>
      <ul class="mainnav">
        <li class="current">ABOUT US</li>
        <li><a href="/priorities">PRIORITIES</a></li>
        <li><a href="/resources">RESOURCES</a></li>
        <li><a href="/interest">EDU NEWS</a></li>
      </ul>
    </nav>
    <section class="intro">
      <h1>Contact Us</h1>
	  <!-- test -->
        </section>
    <nav class="subnav ib-sidebar-right">
      <ul>
        <li class="section-title">more about us</li>
        <li class="subnav-link"><a href="/aboutus/staff.php">STAFF</a></li>
        <li class="subnav-link"><a href="/aboutus/policypriorities.php">POLICY PRIORITIES</a></li>
        <li class="subnav-link"><a href="/aboutus/board.php">BOARD MEMBERS</a></li>
        <li class="subnav-link"><a href="/aboutus/partners.php">PARTNERS</a></li>
        <li class="subnav-link"><a href="/aboutus/contributors.php">CONTRIBUTORS</a></li>
        <li class="subnav-link subnav-current">CONTACT US</li>
      </ul>
    </nav>
    <section class="main-content main-text">
      <hr class="internal-hr">
      <p>&nbsp;</p>
</section>
  </div>
  <footer></footer>
</div>
<map name="Map">
  <area shape="rect" coords="-2,3,23,23" href="#">
  <area shape="rect" coords="79,1,101,22" href="#">
  <area shape="rect" coords="39,1,63,23" href="#">
</map
>
</body>
</html>

Open in new window

SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rascal

ASKER

Thank you both for the help! How embarassing :)
We've all been there. Sometimes it just takes extra eyes.
Been there ... done that ... didn't learn a thing ... still shoot myself in the foot once in a while.

Cd&