Solved

HTML5 - Comment breaks page!

Posted on 2013-01-23
11
605 Views
Last Modified: 2013-01-23
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!
0
Comment
Question by:rascal
  • 3
  • 3
  • 2
  • +2
11 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38811026
we need the link.

do you have the correct doctype?
0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 38811064
Did you correctly close the comment?
0
 
LVL 1

Author Comment

by:rascal
ID: 38811065
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>
0
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38811081
without seeing any of the code it's impossible to help.

make sure all your elements are opened and closed correctly.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 38811092
Can you post rendered HTML here?
0
 
LVL 1

Author Comment

by:rascal
ID: 38811158
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

0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 total points
ID: 38811161
Before we get too far into this please validate the HTML at http://validator.w3.org/ and the CSS at http://jigsaw.w3.org/css-validator/ and fix the errors.  It may be a simple issue that just needs valid code.

Cd&
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 250 total points
ID: 38811199
Try closing your script comment on line 32

<script language="JavaScript" type="text/javascript">
<!--
//*********************************
// CustomPageInit
//*********************************
-->
function CustomPageInit()
{
}
</script>

Open in new window

0
 
LVL 1

Author Closing Comment

by:rascal
ID: 38811420
Thank you both for the help! How embarassing :)
0
 
LVL 30

Expert Comment

by:LZ1
ID: 38811429
We've all been there. Sometimes it just takes extra eyes.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38811798
Been there ... done that ... didn't learn a thing ... still shoot myself in the foot once in a while.

Cd&
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question