A week or so ago our dropdown menus stopped working (they just don’t pull down) on an ASP.net page, after having worked flawlessly for eons. This page is inside an iFrame. Assuming it was an HTML parsing problem, we scrubbed the HTML of over 140 outstanding problems.
We validated the HTML and got it down to one issue. That issue was simply that the autocomplete=”off” attribute on a text field was not XHTML compliant. The complaint by the validator was that that setting should be done by the user. We can’t rely on the user though, due to it being a credit card number entry field.
Anyway, the dropdown menus work fine in every browser (we think) EXCEPT IE7. There is no record of any IE7 updates. None.
Any ideas?
Here is the Page Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Checkout Page</title>
<link href="SCO.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function enterKey(e) {
var key = e.which || e.keyCode;
if (key == 13) {
//document.getElementById("verify").focus();
document.getElementById("verify").click();
}
}
if (typeof (_gat) == 'object') {
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
}
try {
if (typeof (_gat) == 'object') {
var pageTracker = _gat._getTracker("[REDACTED]");
pageTracker._trackPageview();
}
}
catch (err) { }
</script>
</head>
<body onkeydown="enterKey(event);" >
<form name="form1" method="post" action="Checkout.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div>
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" [BLOCK_OF_ENCRYPTED_DATA]" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/cos351/WebResource.axd?d=LFAGEOyy6V0m2yY2MOOUSGuPBfDG4eHYZLxvPSXvdtBuldRcFUKMc6GTu3uwxi-HgE8lsqYZoq1In3zJ4rz7o77Hh_w1&t=634540844353077086" type="text/javascript"></script>
<script src="/cos351/WebResource.axd?d=3jsx0Vr6M7FpZJ45HZ_0CyLU7kMSq-yisOc8NIXtE3_osBRfz4_oletg3QN2sAG8Z5aJ2hwSrG6fcfu8mFgLXP45les1&t=634540844353077086" type="text/javascript"></script>
<script src="/cos351/WebResource.axd?d=zR4T2aEQCVI40hA5-Sga9qGTroBFOpmVErA-BYZ7inEVovCw-le9vqgmikVbNqQakvQmo50suLZE0wPNuZIwoTeYoew1&t=634540844353077086" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWHgL/wvqPAQK28dL4CgLFxN+5CQLv7Ij3BALv7IT3BALv7ID3BALv7Lz3BALv7Lj3BALv7LT3BALv7LD3BALv7Kz3BALv7Oj0BALv7OT0BALw7Ij3BALw7IT3BALw7ID3BAKrucO5DwL4wf6VAgL4weqyCwL4wYbfAwL4wbLkBAL4wa6BDQL4wdqtBgL4wfbKDgL4waKiDAL4wd7OBALl1qDmBwLl1tyCCAKsk+WyBwKKp4O/BIwrxr8bLMEbDaKDw05h4lccnWII" />
</div>
<div class="container" id="main">
<div>
<table width="500px" align="center" cellpadding="0">
<tr><td colspan="2">
<table cellspacing="0" cellpadding="0" width="440" align="center" border="0"><tr><td width="110" nowrap="nowrap"><font face="Verdana" size="1">Step 1: ViewCart</font></td><td width="110" nowrap="nowrap"><font face="Verdana" size="1">Step 2: Order Info</font></td><td width="110" nowrap="nowrap"><font face="Verdana" size="1"><b title="You are here" style="cursor:help">Step 3:</b> Payment</font></td><td width="110" nowrap="nowrap"><font face="Verdana" size="1">Step 4: Receipt</font></td></tr><tr><td colspan="4"><img src="../Images/ec-progress3.gif" width="440" height="5" alt=""/></td></tr></table><table cellspacing="1" width="440" align="center" border="0"><tr bgcolor="#E0F8F7"><td align="left"> <font face="Verdana" size="2"><b>Shopping cart contents:</b></font></td><td align="left"><font face="Verdana" size="2"><b>Price</b></font></td><td align="left"><font face="Verdana" size="2"><b>Qty</b></font></td><td align="left"><font face="Verdana" size="2"><b>Total</b></font></td></tr><tr bgcolor="#FBEFFB"><td nowrap="nowrap" align="left"><font face="Verdana" size="2"> Adult Hooded Sweatshirt</font></td><td align="left"><font face="Verdana" size="2">$12.00</font></td><td align="center"><font face="Verdana" size="2">1</font></td><td align="right"><font face="Verdana" size="2">$12.00</font></td></tr></table><table cellspacing="0" cellpadding="0" width="440" align="center" border="0"><tr><td bgcolor="#990000" nowrap="nowrap"><img src="../Images/no.gif" width="1" height="1" alt=""/></td></tr></table><table cellspacing="0" cellpadding="0" width="440" align="center" border="0"><tr bgcolor="#FBEFFB"><td align="right" nowrap="nowrap"><font face="Verdana" size="2"><b>Total: $12.00</b></font></td></tr><tr bgcolor="#FBEFFB"><td align="right" nowrap="nowrap"><font face="Verdana" size="2"><b>Sales Tax: $0.78</b></font></td></tr><tr bgcolor="#FBEFFB"><td colspan="2" align="right" nowrap="nowrap"><font face="Verdana" size="2"><b>Convenience Fee: $2.16</b></font></td></tr><tr bgcolor="#FBEFFB"><td colspan="2" align="right" nowrap="nowrap"><font face="Verdana" size="2"><b>Order Total: $14.94</b></font></td></tr></table>
</td></tr>
</table>
</div>
<div>
<a id="returnTC" class="link" title="Return to step 1" href="https://secure.jns.revtrak.com/351/JumpOutOfThisCrazyIFrame.asp?url=http%3a%2f%2f351.jns.revtrak.com%2ftek9.asp%3fpg%3dcart%26sess%3d45376f866d2cb2cd79fbd51d31e8222f">« RETURN TO CART</a>
</div>
<div class="boldvalues"><img title="All data is SSL encrypted for your security" src="../Images/SSLLock.PNG" alt="SSLLock" style="border-width:0px;" /> BILLING INFO:</div>
<div>
<table width="500px" align="center" cellpadding="0">
<tr><td width="50%">
<div class="category">
<label for="FName" id="lblFName">First Name:</label>
</div>
</td>
<td width="50%">
<div class="category">
<label for="LName" id="lblLName">Last Name:</label>
</div>
</td></tr>
<tr><td width="50%">
<div class="boldvalues">
<span id="FName">Joe</span>
</div>
</td>
<td width="50%">
<div class="boldvalues">
<span id="LName">Sands</span>
</div>
</td></tr>
<tr><td width="50%">
<div class="category">
<label for="Address1" id="lblAddress1">Address 1:</label>
</div>
</td>
<td width="50%">
<div class="category">
<label for="Address2" id="lblAddress2">Address 2:</label>
</div>
</td></tr>
<tr><td width="50%">
<div class="boldvalues">
<span id="Address1">1002 Any Lane</span>
</div>
</td>
<td width="50%">
<div class="boldvalues">
<span id="Address2"></span>
</div>
</td></tr>
<tr><td width="50%">
<div class="category">
<label for="CityOrProvince" id="lblCityOrProvince">City or Province:</label>
</div>
</td>
<td width="50%">
<div class="category">
<label for="State" id="lblState">State</label> /
<label for="Country" id="lblCountry">Country:</label>
</div>
</td></tr>
<tr><td width="50%">
<div class="boldvalues">
<span id="CityOrProvince">New Ulm</span>
</div>
</td>
<td width="50%">
<div class="boldvalues">
<span id="State">MN</span> /
<span id="Country">US</span>
</div>
</td></tr>
<tr><td width="50%">
<div class="category">
<label for="ZipCode" id="lblZipCode">Zip Code:</label>
</div>
</td>
<td width="50%">
<div class="category">
<label for="Phone" id="lblPhone">Telephone:</label>
</div>
</td></tr>
<tr><td width="50%">
<div class="boldvalues">
<span id="ZipCode">65487</span>
</div>
</td>
<td width="50%">
<div class="boldvalues">
<span id="Phone">6546546544</span>
</div>
</td></tr>
</table>
</div>
<br />
<br />
<div class="boldvalues"><img title="All data is SSL encrypted for your security" src="../Images/SSLLock.PNG" alt="SSLLock" style="border-width:0px;" /> PAYMENT INFO:</div>
<div>
<table align="center" width="500px" cellpadding="0">
<tr><td width="50%">
<div class="category">
<label for="txtCCNum" id="lblCCNum">Credit Card Number:</label>
</div>
</td>
<td width="50%">
<div class="category">
<label for="txtCCName" id="lblCCName">Cardholder Name:</label>
</div>
</td></tr>
<tr><td width="50%">
<div class="boldvalues">
<input name="txtCCNum" type="text" maxlength="16" id="txtCCNum" AutoComplete="off" style="width:130px;" />
<span id="rfvCCNum" class="errormessage" style="color:Red;visibility:hidden;">*</span>
</div>
</td>
<td width="50%">
<div class="boldvalues">
<input name="txtCCName" type="text" maxlength="30" id="txtCCName" AutoComplete="off" />
<span id="rfvCCName" class="errormessage" style="color:Red;visibility:hidden;">*</span>
</div>
</td></tr>
<tr><td width="50%">
<div class="category">
</div>
</td>
<td width="50%">
<div class="category">
<span id="lblExpires">Expires:</span>
</div>
</td></tr>
<tr><td width="50%">
<div class="category">
</div>
</td>
<td width="50%">
<div class="boldvalues">
<select name="ddlMonth" id="ddlMonth">
<option selected="selected" value="00">Month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<span id="rfvMonth" class="errormessage" style="color:Red;visibility:hidden;">*</span>
<select name="ddlYear" id="ddlYear">
<option selected="selected" value="00">Year</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
<span id="rfvYear" class="errormessage" style="color:Red;visibility:hidden;">*</span><br />
</div>
</td></tr>
</table>
</div>
<br /><br />
<div>
<div id="vsAll" class="errormessage" style="color:Red;width:257px;display:none;">
</div>
</div>
<br />
</div>
<div>
<input type="image" name="cancel" id="cancel" src="../Images/Cancel.gif" style="border-width:0px;" />
<input type="image" name="verify" id="verify" src="../Images/verify-my-info.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("verify", "", true, "", "", false, false))" style="border-width:0px;" />
</div>
<br /><br /><br /><br /><br /><br />
<script type="text/javascript">
//<![CDATA[
var Page_ValidationSummaries = new Array(document.getElementById("vsAll"));
var Page_Validators = new Array(document.getElementById("rfvCCNum"), document.getElementById("rfvCCName"), document.getElementById("rfvMonth"), document.getElementById("rfvYear"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var rfvCCNum = document.all ? document.all["rfvCCNum"] : document.getElementById("rfvCCNum");
rfvCCNum.controltovalidate = "txtCCNum";
rfvCCNum.errormessage = "Enter credit card number";
rfvCCNum.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
rfvCCNum.initialvalue = "";
var rfvCCName = document.all ? document.all["rfvCCName"] : document.getElementById("rfvCCName");
rfvCCName.controltovalidate = "txtCCName";
rfvCCName.errormessage = "Enter name as printed on card";
rfvCCName.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
rfvCCName.initialvalue = "";
var rfvMonth = document.all ? document.all["rfvMonth"] : document.getElementById("rfvMonth");
rfvMonth.controltovalidate = "ddlMonth";
rfvMonth.errormessage = "Select expiration month";
rfvMonth.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
rfvMonth.initialvalue = "Month";
var rfvYear = document.all ? document.all["rfvYear"] : document.getElementById("rfvYear");
rfvYear.controltovalidate = "ddlYear";
rfvYear.errormessage = "Select expiration year";
rfvYear.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
rfvYear.initialvalue = "Year";
var vsAll = document.all ? document.all["vsAll"] : document.getElementById("vsAll");
vsAll.headertext = "Please fix the following errors:";
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
WebForm_AutoFocus('txtCCNum');//]]>
</script>
</form>
</body>
</html>
Yes. Microsoft’s KB 2628724 is the answer. I tested it and replicated the issue. Then, I followed the mods to IE7 suggested in the article and it started working.
Solutions (in order of precedence):