Solved

HTML5 - Comment breaks page!

Posted on 2013-01-23
11
603 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

861 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now