Problems with the page dropping into compatibility mode and lower

HTML & CSS
1

Hi.

I have a page which validates (mostly - it flags 6 warning to do with the table) in HTML 4.01 Strict! yet for some reason the page seems to randomly force IE to drop into quirks mode or ie 7 etc. If I put the page back into ie9 mode all is well for a while and then it happens again on another page load.

The page source is below.

Please note this mostly note my code as it is generated from smarty templates for Amember.

Is there anything on the page that is causing IE to do this that I am missing.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<head>
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8">-->
<script src="http://code.jquery.com/jquery-latest.js?smarty" type="text/javascript"></script>
<script src="http://www.behaviourneeds.com/member/my_content/js/jquery.qtip.js?smarty" type="text/javascript"></script>
<script src="http://www.behaviourneeds.com/member/my_content/js/jquery.validate.js?smarty" type="text/javascript"></script>
<script src="http://www.behaviourneeds.com/member/my_content/js/jquery.ticker.js?smarty" type="text/javascript"></script>
<script src="http://www.behaviourneeds.com/member/my_content/js/jquery.colorbox-min.js?smarty" type="text/javascript"></script>
<script src="http://www.behaviourneeds.com/member/my_content/js/jquery.tabSlideOut.v1.3.js?smarty" type="text/javascript"></script>
<script src="http://www.behaviourneeds.com/member/my_content/js/jquery.popupWindow.js?smarty" type="text/javascript"></script>
<script src="http://www.behaviourneeds.com/member/my_content/js/jquery.cookie.js?smarty" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://www.behaviourneeds.com/member/my_content/css/myCss.css">
<link rel="stylesheet" type="text/css" href="http://www.behaviourneeds.com/member/my_content/css/colorbox.css">
<link rel="stylesheet" type="text/css" href="http://www.behaviourneeds.com/member/my_content/menu_assets/styles.css">
<link rel="stylesheet" type="text/css" href="http://www.behaviourneeds.com/member/my_content/css/jquery.qtip.css">
<link rel="stylesheet" type="text/css" href="http://www.behaviourneeds.com/member/my_content/css/ticker-style.css">
<title>Behaviour Need Member Area</title>
<style type="text/css">
#main #mainContent h2 {
	color: #900;
}
.grey {
	color: #006;
}
#main #mainContent div .grey .grey {
	color: #333;
	font-size:22px;
}
.size24
	{
		font-size:26px;
	}
</style>
<style type="text/css">
.gray_text{font-family:Verdana, Geneva, sans-serif; color:#D0D0D0; font-size:16px;}
.white1_text{font-family:Verdana, Geneva, sans-serif;; color:#FFF; font-size:18px;}
.white_text{font-family:Verdana, Geneva, sans-serif;; color:#FFEAEA; font-size:16px;}
.underline_text{font-family:Verdana, Geneva, sans-serif;; color:#F99D9D; font-size:16px; text-decoration:underline;}
.c1{font-family:Verdana, Geneva, sans-serif;; font-size:14px;}
.c1b {font-family:Verdana, Geneva, sans-serif;; font-size: 14px; font-weight: bold; }
.c2{font-family:Verdana, Geneva, sans-serif;; font-size:12px; font-weight:bold;}
.c2b{font-family:Verdana, Geneva, sans-serif;; font-size:18px; font-weight:bold;}
.c3{font-family:Verdana, Geneva, sans-serif;; font-size:18px; font-weight:bold; color:#F99D9D;}
.c3white{font-family:Verdana, Geneva, sans-serif;; font-size:12px; color:#FFFFFF; font-weight:bold;}
.c4{font-family:Verdana, Geneva, sans-serif;; font-size:18px; font-weight:bold;}
.c4red{font-family:Verdana, Geneva, sans-serif;; font-size:18px; font-weight:bold; color:#7A070A;}
.adminFee{font-family:Verdana, Geneva, sans-serif;; font-size:14px; color:#FFF;}
.price{font-family:Verdana, Geneva, sans-serif;; font-size:14px; font-weight:bold; color:#006;}
.price a{font-family:Verdana, Geneva, sans-serif;; font-size:14px; font-weight:bold; color:#006;}
.price1{font-family:Verdana, Geneva, sans-serif;; font-size:14px; font-weight:bold; color:#FFF;}
.price1 a{font-family:Verdana, Geneva, sans-serif;; font-size:14px; font-weight:bold; color:#FFF;}

</style>
</head>

<body>
<div id="header" class="centerStuff"><img src="http://www.behaviourneeds.com/member/my_content/images/logo.png" width="793" height="185" alt="Behaviourneeds Logo"></div>
<div class='cssmenu'>
<ul>
   <li class='active '><a href='/member' id="home"><span>Home</span></a></li>
   <li><a href='http://www.classroom-expert.com' id="classroom-expert" onclick="window.open(this.href);return false;"><span>Webinars</span></a></li>
   <li><a href='http://www.behaviourneeds.com/ccm' id="behaviour-ology" onclick="window.open(this.href);return false;"><span>Behaviour-Ology</span></a></li>
   <li><a href='http://www.lesson-ology.com' id="lesson-ology" onclick="window.open(this.href);return false;"><span>Lesson-Ology</span></a></li>
   <li><a href="http://www.behaviourneeds.com/sef" id="sef" onclick="window.open(this.href);return false;"><span>SEF</span></a></li>
   <li><a href="http://www.behaviourneeds.com/noisyclass" id="noisyclass" onclick="window.open(this.href);return false;"><span>Noisy Class</span></a></li>
   <li><a href='http://www.behaviourneeds.com/products' id="products" onclick="window.open(this.href);return false;"><span>Products</span></a></li>
</ul>
</div>
<script src="my_content/js/jquery.colorbox-min.js" type="text/javascript"></script>
<div id="main">
<div id="mainContent">
<ul id="js-news" class="js-hidden"><li></li></ul>
<div class="error" style="display:none;">
      <img src="my_content/images/warning.gif" alt="Warning!" width="24" height="24" style="float:left; margin: 5px 10px 0px 0px; ">
      <span></span>.<br style="clear:both;">	
</div>
<div  style="padding-left:5px; padding-right:5px; font-size: 18px;">
<h2 class="centerStuff size24">Could These Free-to-Attend Webinars &amp; Online Events Turn You Into The Most Respected Teacher In Your School?</h2>
<h2 class="centerStuff grey"><span class="grey">Register Below To Learn The Powerful Skills &amp; Strategies Used by EXPERT Teachers and WORLD-FAMOUS Education Authors and Consultants... In The Comfort Of Your Own Home</span></h2>
<p class="leftStuff"><img src="my_content/images/creditcard.png" alt="CreditCard" width="350" height="204" class="imageLeft">Become a <a href="http://www.1shoppingcart.com/SecureCart/SecureCart.aspx?mid=0E42C59E-F62F-42D0-B8D4-C867579AF8A6&amp;pid=0fad6a35eb8a4d5ea33a058e172328ad&amp;bn=1"><strong>FREE MEMBER</strong></a> and you'll immediately be able to attend any of our <strong>free live webinars</strong> and other online events (<a href="http://www.classroom-expert.com/webinar-schedule/" onclick="window.open(this.href);return false;">listed here</a>).</p>
<p class="leftStuff">Become a <strong><a class="ajax" href="my_content/t.php?u=9">GOLD MEMBER</a></strong>and you'll have access to  ALL our <strong>Webinar Recordings</strong> (past &amp; future), including <strong>Transcripts</strong>, <strong>MP3/MP4 Recordings</strong> &amp;<strong> Certificates of Attendance</strong>.</p>
<p class="leftStuff"><strong><a class="ajax" href="my_content/t.php?u=11">SCHOOL SITE LICENSES</a> </strong>provide access to all member resources for an entire staff group for 1 year. </p>
<p class="leftStuff">&nbsp;</p>
<table width="88%" border="0" align="center" cellpadding="6" cellspacing="1" bgcolor="#ACACAC">
  <tr>
    <td width="170" align="center" valign="middle" bgcolor="#3F3F3F"><span class="white1_text">What You Get</span></td>
    <td width="96"  align="center" valign="middle" bgcolor="#3F3F3F"><span class="white1_text">Free Member</span></td>
    <td width="98"  align="center" valign="middle" bgcolor="#3F3F3F"><span class="white1_text">Gold Member</span></td>
    <td width="102"  align="center" valign="middle" bgcolor="#3F3F3F"><span class="white1_text">Platinum Member</span></td>
    <td width="127"  align="center" valign="middle" bgcolor="#3F3F3F"><span class="white1_text">Site License</span></td>
    </tr>
  <tr bgcolor="#D3D1D1">
    <td bgcolor="#D3D1D1" class="c1">Free Live Webinars</td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" bgcolor="#D3D1D1" class="c3"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
    </tr>
  <tr bgcolor="#DFDFDF">
    <td bgcolor="#DFDFDF" class="c1" id="oms">Open Mic Sessions</td>
    <td align="center" valign="middle" bgcolor="#DFDFDF" class="c2"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
    <td align="center" valign="middle" bgcolor="#DFDFDF" class="c2"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
    <td align="center" valign="middle" bgcolor="#DFDFDF" class="c2"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
    <td align="center" bgcolor="#DFDFDF"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
    </tr>
  <tr bgcolor="#D3D1D1">
    <td bgcolor="#D3D1D1" id="tmt">Ten Minute Tutorials</td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/cross.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" bgcolor="#D3D1D1"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
    </tr>
  <tr bgcolor="#DFDFDF">
    <td bgcolor="#DFDFDF" id="rp1">Transcripts</td>
    <td align="center" valign="middle" bgcolor="#DFDFDF"><img src="my_content/images/cross.png" width="28" height="28" alt="Cross" ></td>
    <td align="center" valign="middle" bgcolor="#DFDFDF"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
    <td align="center" valign="middle" bgcolor="#DFDFDF"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
    <td align="center" bgcolor="#DFDFDF"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
    </tr>
  <tr bgcolor="#D3D1D1">
    <td bgcolor="#D3D1D1" class="c1">MP3/MP4 Recordings Of Every Event</td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/cross.png" width="28" height="28" alt="Cross" ></td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" bgcolor="#D3D1D1"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
  </tr>
  <tr bgcolor="#DFDFDF">
    <td bgcolor="#DFDFDF" class="c1">Webinar Attendance Certificate</td>
    <td align="center" valign="middle" bgcolor="#DFDFDF" class="c2b"><img src="my_content/images/cross.png" width="28" height="28" alt="Cross" ></td>
    <td align="center" valign="middle" bgcolor="#DFDFDF" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" valign="middle" bgcolor="#DFDFDF" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" bgcolor="#DFDFDF"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
  </tr>
  <tr bgcolor="#D3D1D1">
    <td bgcolor="#D3D1D1" class="c1">Past Webinar Library</td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/cross.png" width="28" height="28" alt="Cross" ></td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" bgcolor="#D3D1D1"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
  </tr>
  <tr bgcolor="#D3D1D1">
    <td bgcolor="#DFDFDF" class="c1">CD Of The Month</td>
    <td align="center" valign="middle" bgcolor="#DFDFDF" class="c2b"><img src="my_content/images/cross.png" width="28" height="28" alt="Cross" ></td>
    <td align="center" valign="middle" bgcolor="#DFDFDF" class="c2b"><img src="my_content/images/cross.png" width="28" height="28" alt="Cross" ></td>
    <td align="center" valign="middle" bgcolor="#DFDFDF" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" bgcolor="#DFDFDF"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
  </tr>
  <tr bgcolor="#DFDFDF">
    <td bgcolor="#D3D1D1" class="c1">Whole Staff Access</td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/cross.png" width="28" height="28" alt="Cross" ></td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/cross.png" width="28" height="28" alt="Cross" ></td>
    <td align="center" valign="middle" bgcolor="#D3D1D1" class="c2b"><img src="my_content/images/cross.png" width="28" height="28" alt="Cross" ></td>
    <td align="center" bgcolor="#D3D1D1"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
  </tr>
  <tr bgcolor="#D3D1D1">
    <td bgcolor="#DFDFDF" class="c1" id="rp">Forum</td>
    <td align="center" valign="middle" bgcolor="#DFDFDF" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" valign="middle" bgcolor="#DFDFDF" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" valign="middle" bgcolor="#DFDFDF" class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></td>
    <td align="center" bgcolor="#DFDFDF"><span class="c2b"><img src="my_content/images/checkmark.png" width="34" height="32" alt="Tick" ></span></td>
  </tr>
  <tr bgcolor="#9D9C9C">
    <td bgcolor="#9D9C9C" class="c1b">Cost</td>
    <td align="center" valign="middle" bgcolor="#9D9C9C" class="price">FREE</td>
    <td align="center" valign="middle" bgcolor="#9D9C9C" class="price">$1 (then $17 /month thereafter)</td>
    <td align="center" valign="middle" bgcolor="#9D9C9C" class="price">$37 /month</td>
    <td align="center" bgcolor="#9D9C9C" class="price">$799 (12 months)</td>
  </tr>
  <tr bgcolor="#9D9C9C">
    <td bgcolor="#9D9C9C" class="c1b">Buy Now</td>
    <td align="center" valign="middle" bgcolor="#9D9C9C" class="price"><a href="http://www.1shoppingcart.com/SecureCart/SecureCart.aspx?mid=0E42C59E-F62F-42D0-B8D4-C867579AF8A6&amp;pid=0fad6a35eb8a4d5ea33a058e172328ad&amp;bn=1"><img src="my_content/images/buttons/order.png" width="150" height="45" alt="Order Button" ></a></td>
    <td align="center" valign="middle" bgcolor="#9D9C9C" class="price"><a href="my_content/t.php?u=9" class="ajax"><img src="my_content/images/buttons/order.png"  width="150" height="45" alt="Order Button"  ></a></td>
    <td align="center" valign="middle" bgcolor="#9D9C9C" class="price"><a href="my_content/t.php?u=10" class="ajax"><img src="my_content/images/buttons/order.png"  width="150" height="45" alt="Order Button"  ></a></td>
    <td align="center" bgcolor="#9D9C9C" class="price1"><span class="price"><a href="http://www.1shoppingcart.com/SecureCart/SecureCart.aspx?mid=0E42C59E-F62F-42D0-B8D4-C867579AF8A6&amp;pid=f90a4fcd57a644c7a60ba48d2aeede43&amp;bn=1" class="ajax"><img src="my_content/images/buttons/order.png" alt="Order Button"  width="150" height="45" ></a></span></td>
  </tr>
</table>
<p align="center"><img src="my_content/images/30dg.png" width="641" height="240" alt="This is the 30 day guarantee" ></p>
<p></p>
</div>
</div>
<div id="mainContentSideBar">
<div id="loginForm">
<p> </p>
<form name="login" id="login" method="post" action="/member/member.php">
<table width="100%" border="0">
  <tr>
    <td colspan="2"><h3>Existing Members</h3></td>
    </tr>
  <tr>
    <td>Login:</td>
    <td><input type="text" name="amember_login" size="15" value="" class="required" ></td>
  </tr>
  <tr>
    <td>Password:</td>
    <td><input type="password" name="amember_pass" size="15" class="required"><input type="hidden" name="login_attempt_id" value="1346229492" >
</td>
  </tr>
  <tr>
    <td colspan="2"><div class="centerStuff">
      <input type="submit" value="&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;" >&nbsp;&nbsp;<a href="#" onclick="" id="lostPasswordLink">Lost Password?
      </a></div></td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>

</div><div id="lostPasswordForm"  style="display:none;">
<h3>Lost password?</h3>
<form name="sendpass" id ="sendpass" method="post" action="http://www.behaviourneeds.com/member/sendpass.php">
<table class="centerStuff" width="30%">
    <tr>
    <td>Enter your EMAIL address</td>
    </tr>
    <tr>
        <td><input type="text" name="login" size="20" class="required" ></td>
    </tr>
</table>
<div class="centerStuff">
  <input type="submit" value="Get Password" >
</div>
</form>
</div>
<h3>Recent Discussion</h3>
<div id="forumPosts"><script type="text/javascript" src="http://classroomexpert.disqus.com/combination_widget.js?num_items=5&amp;hide_mods=1&amp;color=grey&amp;default_tab=recent&amp;excerpt_length=25"></script></div>
<h3>Find us Facebook</h3>
<!--<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBehaviour_Needs%2F130986580294869&amp;width=240&amp;colorscheme=light&amp;connections=10&amp;stream=false&amp;header=true&amp;height=287" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:287px;" allowTransparency="true"></iframe>-->
<object style="border: medium none; overflow: hidden; width: 240px; height: 287px;" data="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBehaviour_Needs%2F130986580294869&amp;width=240&amp;colorscheme=light&amp;connections=10&amp;stream=false&amp;header=true&amp;height=287"></object>
<div style="padding-bottom:15px;"></div>
</div>
</div>
<script type="text/javascript">
//Lost password slide form
$("#lostPasswordLink").click(function ()
	{
		$("#loginForm").slideToggle("slow");
		$("#lostPasswordForm").slideToggle("slow");
		return false;
	});

//load the ticker tape.
  $(function () {
        $('#js-news').ticker({
            htmlFeed: false,
            ajaxFeed: true,
            feedUrl: 'my_content/webinar_cache/tickerTape.xml',
            feedType: 'xml',
			titleText: 'Latest Webinars',
			displayType: 'reveal',
			controls: false // set up any options for the ticker tape that we need.

        });
    });

</script>
<script src="my_content/js/documentReady.js" type="text/javascript"></script>
<div style="clear:both; min-height:40px;; background-color:#00498f; color:#FFF; padding-left:10px;" >
<hr>
&copy; <a style="padding-bottom:10px; color:#FFF;" href="http://www.behaviourneeds.com">Behaviour Needs LTD</a> || <a style="padding-bottom:10px; color:#FFF;" href='http://www.behaviourneeds.com/helpdesk' id="helpdesk" onclick="window.open(this.href);return false;"><span>Support</span></a> 2012 </div>
</body>
2

Don’t forget the <html> element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

[COLOR="#FF0000"]<html lang="en">[/COLOR]

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
</head>
<body>
</body>

[COLOR="#FF0000"]</html>[/COLOR]
3

Thanks.

I have just added that now and for what I can see it still happens…

Cheers
Chris

4

Likely causes for quirks mode are that the doctype is missing or corrupted or you have characters or comments above the doctype which will cause IE to go into quirks mode.

If IE7 mode is being invoked then its probably a script that is causing an error and IE switches into IE7 mode to recover. Check for any script errors and fix.

You will probably need to create a stand alone version to test this out and remove scripts one by to see if you can spot where the error is coming from. Do you have a live page we can look at?

5

Hi.

I certainly do have a page you can view - http://www.behaviourneeds.com/member/

Thanks very much

Chris