Solved

HTML5 - Comment breaks page!

Posted on 2013-01-23
11
604 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

770 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