问题
I made a JSONP widget.
However, when one of the partner sites put it in their page, (1) it doesn't render at all in IE and (2) in other browsers (Firefox & Google Chrome), the HTML of the widget renders incorrectly: the <aside> closes prematurely, before the Financial Aid Glossary. It's something specific to that page because it works fine on this example college resource center page.
To fix these two issues, I tried saving the page source to a local file and messing around with the local file and with Firebug, deleting DOM elements and stuff. I even tried fixing the errors that The W3C Markup Validation Service found. But, I still couldn't get it to render correctly.
How should I tell them to change their page so that the widget renders correctly? Or, how should I update the widget script I wrote?
They may take their page down since it's not rendering correctly, so here's the source of the page just in case:
<!DOCTYPE html>
<html>
<head id="ctl01_Head1" profile="New Jersey Credit Union League"><title>
College Resource Center - New Jersey Credit Union League
</title>
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery.ui.all.css' />
<link rel='stylesheet' type='text/css' href='/csshandler.ashx?skin=InnerTemplate&s=1&v=2.3.5.8' />
<!--[if IE]>
<script defer="defer" src="http://njcul.org/ClientScript/html5.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" href="http://njcul.org/Data/Sites/1/skins/InnerTemplate/IESpecific.css?cb=9d546eec-6752-4067-8f94-9a5b642213e4" type="text/css" id="IE6CSS" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="http://njcul.org/Data/Sites/1/skins/InnerTemplate/IE7Specific.css?cb=9d546eec-6752-4067-8f94-9a5b642213e4" type="text/css" id="IE7CSS" />
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="search" type="application/opensearchdescription+xml" title="New Jersey Credit Union League" href="http://njcul.org/SearchEngineInfo.ashx" />
<!--[if IE]>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" /><meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />
<![endif]-->
<meta name="viewport" content="width=670, initial-scale=0.45, minimum-scale=0.45" />
<link rel='shortcut icon' href='http://njcul.org/Data/Sites/1/skins/InnerTemplate/favicon.ico' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript" ></script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="App_Themes/pageskin/theme.css" type="text/css" rel="stylesheet" />
<link rel='canonical' href='http://njcul.org/college-resource-center.aspx' /><style type="text/css">
.ctl01_SiteMenu1_ctl00_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl01_SiteMenu1_ctl00_1 { text-decoration:none; }
.ctl01_SiteMenu1_ctl00_2 { }
.ctl01_PageMenu1_ctl01_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl01_PageMenu1_ctl01_1 { text-decoration:none; }
.ctl01_PageMenu1_ctl01_2 { }
.ctl01_PageMenu2_ctl01_0 { text-decoration:none; }
</style></head>
<body class="pagebody" onLoad="MM_preloadImages('ps_menu_down.png')">
<form method="post" action="/college-resource-center.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">
<div>
<input type="hidden" name="ctl01_ScriptManager1_HiddenField" id="ctl01_ScriptManager1_HiddenField" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATEFIELDCOUNT" id="__VIEWSTATEFIELDCOUNT" value="45" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjA1OTAyNzk1MQ9kFgJmD2QWBAIBDxYCHgdwcm9maWxlBR5OZXcgSmVyc2V5IENyZWRpdCBVbmlvbiBMZWFndWVkAgMP" />
<input type="hidden" name="__VIEWSTATE1" id="__VIEWSTATE1" value="ZBYiAgEPFgIeD1NpdGVNYXBQcm92aWRlcgUJbW9qb3NpdGUxZAIDDxYEHwEFCW1vam9zaXRlMR4PU3RhcnRpbmdOb2RlVXJsBQt+" />
<input type="hidden" name="__VIEWSTATE2" id="__VIEWSTATE2" value="L2hvbWUuYXNweGQCBQ8WBB8BBQltb2pvc2l0ZTEfAgUYfi9lZHVjYXRpb24tLWV2ZW50cy5hc3B4ZAIHDxYCHwEFCW1vam9zaXRl" />
<input type="hidden" name="__VIEWSTATE3" id="__VIEWSTATE3" value="MWQCFQ8PFgIeB1Zpc2libGVoZGQCGw9kFgJmDw8WAh8DaGQWBgIBDxYCHwNoFgJmDw8WAh4EVGV4dAULU2l0ZSBTZWFyY2hkZAID" />
<input type="hidden" name="__VIEWSTATE4" id="__VIEWSTATE4" value="Dw8WAh8DaGRkAgUPDxYCHwNoZGQCIQ8PFgIfA2hkZAInD2QWAgIBDw8WAh8DaGRkAi0PZBYGAgEPDxYCHghJbWFnZVVybAUrL0Rh" />
<input type="hidden" name="__VIEWSTATE5" id="__VIEWSTATE5" value="dGEvU2l0ZXMvMS9za2lucy9Jbm5lclRlbXBsYXRlL2hlYWQxLmpwZ2RkAgMPDxYCHwUFKy9EYXRhL1NpdGVzLzEvc2tpbnMvSW5u" />
<input type="hidden" name="__VIEWSTATE6" id="__VIEWSTATE6" value="ZXJUZW1wbGF0ZS9oZWFkMi5qcGdkZAIFDw8WAh8FBSsvRGF0YS9TaXRlcy8xL3NraW5zL0lubmVyVGVtcGxhdGUvaGVhZDMuanBn" />
<input type="hidden" name="__VIEWSTATE7" id="__VIEWSTATE7" value="ZGQCLw9kFgRmDw8WAh8DaGRkAgQPDxYCHwNoZGQCMQ8PFgQeCENzc0NsYXNzBTlhcnQtbGF5b3V0LWNlbGwgYXJ0LXNpZGViYXIx" />
<input type="hidden" name="__VIEWSTATE8" id="__VIEWSTATE8" value="IGxlZnRzaWRlIGxlZnQyY29sdW1uIGNtc3pvbmUeBF8hU0ICAmQWBAIBD2QWAgICD2QWAmYPZBYCAgEPZBYCZhA8KwAJAgAPFhIe" />
<input type="hidden" name="__VIEWSTATE9" id="__VIEWSTATE9" value="FENvbGxhcHNlSW1hZ2VUb29sVGlwBRNDb2xsYXBzZSB0aGlzIG5vZGUuHg1QYXRoU2VwYXJhdG9yBHweC0V4cGFuZERlcHRoZh4S" />
<input type="hidden" name="__VIEWSTATE10" id="__VIEWSTATE10" value="RXhwYW5kSW1hZ2VUb29sVGlwBRFFeHBhbmQgdGhpcyBub2RlLh4SU2hvd0V4cGFuZENvbGxhcHNlZx4NTmV2ZXJFeHBhbmRlZGQe" />
<input type="hidden" name="__VIEWSTATE11" id="__VIEWSTATE11" value="C18hRGF0YUJvdW5kZx4XUG9wdWxhdGVOb2Rlc0Zyb21DbGllbnRnHgxEYXRhU291cmNlSUQFEGxldmVsM2RhdGFzb3VyY2VkCBQr" />
<input type="hidden" name="__VIEWSTATE12" id="__VIEWSTATE12" value="AAsFPzA6MCwwOjEsMDoyLDA6MywwOjQsMDo1LDA6NiwwOjcsMTo3LDA6NywwOjgsMTo4LDA6OCwxOjgsMDo4LDA6ORQrAAIWDB8E" />
<input type="hidden" name="__VIEWSTATE13" id="__VIEWSTATE13" value="BRJDYWxlbmRhciBvZiBFdmVudHMeBVZhbHVlBSQyMmU3NmVlZC1iZWM0LTRjNWItYWJhNC04MTVjNTJmNTJiNDQeC05hdmlnYXRl" />
<input type="hidden" name="__VIEWSTATE14" id="__VIEWSTATE14" value="VXJsBRl+L2NhbGVuZGFyLW9mLWV2ZW50cy5hc3B4HghEYXRhUGF0aAUCNjceCURhdGFCb3VuZGceEFBvcHVsYXRlT25EZW1hbmRo" />
<input type="hidden" name="__VIEWSTATE15" id="__VIEWSTATE15" value="ZBQrAAIWDB8EBRBDaGFwdGVyIE1lZXRpbmdzHxEFJGNiZGUyMTFhLTc0YzItNDI2Zi05NjQ4LTQ5NTY2ZjY4NjViNx8SBRd+L2No" />
<input type="hidden" name="__VIEWSTATE16" id="__VIEWSTATE16" value="YXB0ZXItbWVldGluZ3MuYXNweB8TBQI2OB8UZx8VaGQUKwACFgwfBAUOU3BlY2lhbCBFdmVudHMfEQUkODgxZjE0Y2EtMWI0NC00" />
<input type="hidden" name="__VIEWSTATE17" id="__VIEWSTATE17" value="YjYxLWE2YmQtMjk2Mzc0NzMyZGY1HxIFFX4vc3BlY2lhbC1ldmVudHMuYXNweB8TBQI2OR8UZx8VZ2QUKwACFgwfBAUURWR1Y2F0" />
<input type="hidden" name="__VIEWSTATE18" id="__VIEWSTATE18" value="aW9uYWwgU2Vzc2lvbnMfEQUkM2QxYTBmZWUtMTk1Ny00MGYwLThlMzItNzEzMjM4ZDM5Yjg5HxIFG34vZWR1Y2F0aW9uYWwtc2Vz" />
<input type="hidden" name="__VIEWSTATE19" id="__VIEWSTATE19" value="c2lvbnMuYXNweB8TBQI3MB8UZx8VZ2QUKwACFgwfBAUsU3BlY2lhbCBDVSBEaXJlY3RvciAmYW1wOyBWb2x1bnRlZXIgUHJvZ3Jh" />
<input type="hidden" name="__VIEWSTATE20" id="__VIEWSTATE20" value="bXMfEQUkMGRjNWUwY2EtMWQyNy00N2JlLTgwMjgtNmYzY2Q2NmNjNTkzHxIFLX4vc3BlY2lhbC1jdS1kaXJlY3Rvci12b2x1bnRl" />
<input type="hidden" name="__VIEWSTATE21" id="__VIEWSTATE21" value="ZXItcHJvZ3JhbXMuYXNweB8TBQMxNjgfFGcfFWhkFCsAAhYMHwQFG0NVTkEgTGVhcm5pbmcgT3Bwb3J0dW5pdGllcx8RBSQyZTRl" />
<input type="hidden" name="__VIEWSTATE22" id="__VIEWSTATE22" value="YWYyMS0wNjEwLTQ5OWYtYTVmMy1lN2VlNjM2ZWZiMmUfEgUifi9jdW5hLWxlYXJuaW5nLW9wcG9ydHVuaXRpZXMuYXNweB8TBQI2" />
<input type="hidden" name="__VIEWSTATE23" id="__VIEWSTATE23" value="Nh8UZx8VaGQUKwACFgwfBAUrWW91dGggSW52b2x2ZW1lbnQgQm9hcmQgU2Nob2xhcnNoaXAgUHJvZ3JhbR8RBSRjNjUzMjQwNC1k" />
<input type="hidden" name="__VIEWSTATE24" id="__VIEWSTATE24" value="OTY1LTQ4ZmYtYTZhNC02YmFkYjU4ZDE0YTAfEgUKfi95aWIuYXNweB8TBQI5Nh8UZx8VaGQUKwACFgwfBAUbRXhlY3V0aXZlIExl" />
<input type="hidden" name="__VIEWSTATE25" id="__VIEWSTATE25" value="YWRlcnNoaXAgU2VyaWVzHxEFJDE0MTg2ZTUzLWI4MWMtNDIzOS1iMDM5LWY5N2U2ZTI2ZDU4OR8SBQp+L2Vscy5hc3B4HxMFAzEy" />
<input type="hidden" name="__VIEWSTATE26" id="__VIEWSTATE26" value="OR8UZx8VaGQUKwACFgwfBAUUQ2VydGlmaWNhdGUgUHJvZ3JhbXMfEQUkNjMxYWFkMzctY2NhZS00OTFhLWE3YjAtODI3NzM5YWM1" />
<input type="hidden" name="__VIEWSTATE27" id="__VIEWSTATE27" value="NjZhHxIFGn4vY2VydGlmaWNhdGVwcm9ncmFtcy5hc3B4HxMFAzE1Mx8UZx8VZ2QUKwACFhAfBAUXQ29sbGVnZSBSZXNvdXJjZSBD" />
<input type="hidden" name="__VIEWSTATE28" id="__VIEWSTATE28" value="ZW50ZXIfEQUkOTI3NDJkM2QtZTYzYS00OTg2LTgwMTYtYjNkNjlhNWU5NzA3HxIFHn4vY29sbGVnZS1yZXNvdXJjZS1jZW50ZXIu" />
<input type="hidden" name="__VIEWSTATE29" id="__VIEWSTATE29" value="YXNweB8TBQMxNjYfFGceCFNlbGVjdGVkZx8VaB4IRXhwYW5kZWRnZAUPY3RsMDEkY3RsMDZ8bm5uZAIDDw8WAh8DaGRkAjMPDxYE" />
<input type="hidden" name="__VIEWSTATE30" id="__VIEWSTATE30" value="HwYFNWFydC1sYXlvdXQtY2VsbCBhcnQtY29udGVudCBjZW50ZXItbGVmdG1hcmdpbiBjbXN6b25lHwcCAmQWBgIBD2QWAmYPDxYE" />
<input type="hidden" name="__VIEWSTATE31" id="__VIEWSTATE31" value="HwYFC2JyZWFkY3J1bWJzHwcCAmQWAgIBDzwrAAUBAA8WBh4VUGFyZW50TGV2ZWxzRGlzcGxheWVkAgIfCQUDID4gHwNnZBYGZg9k" />
<input type="hidden" name="__VIEWSTATE32" id="__VIEWSTATE32" value="FgICAQ8PFggfEgUKL2hvbWUuYXNweB8EBQRIb21lHwYFD3Vuc2VsZWN0ZWRjcnVtYh8HAgJkZAICD2QWAgIBDw8WCB8SBRcvZWR1" />
<input type="hidden" name="__VIEWSTATE33" id="__VIEWSTATE33" value="Y2F0aW9uLS1ldmVudHMuYXNweB8EBRZFZHVjYXRpb24gJmFtcDsgRXZlbnRzHwYFD3Vuc2VsZWN0ZWRjcnVtYh8HAgJkZAIED2QW" />
<input type="hidden" name="__VIEWSTATE34" id="__VIEWSTATE34" value="AgIBDw8WCB8SBR0vY29sbGVnZS1yZXNvdXJjZS1jZW50ZXIuYXNweB8EBRdDb2xsZWdlIFJlc291cmNlIENlbnRlch8GBQ1zZWxl" />
<input type="hidden" name="__VIEWSTATE35" id="__VIEWSTATE35" value="Y3RlZGNydW1iHwcCAmRkAgMPDxYCHwNoZGQCBQ9kFgJmD2QWAmYPDxYEHwYFCW1vZHVsZTI0MR8HAgJkFgICAQ9kFgICAw9kFgIC" />
<input type="hidden" name="__VIEWSTATE36" id="__VIEWSTATE36" value="Aw9kFgICAQ8PFgQeC0NvbnRlbnRHdWlkKClYU3lzdGVtLkd1aWQsIG1zY29ybGliLCBWZXJzaW9uPTIuMC4wLjAsIEN1bHR1cmU9" />
<input type="hidden" name="__VIEWSTATE37" id="__VIEWSTATE37" value="bmV1dHJhbCwgUHVibGljS2V5VG9rZW49Yjc3YTVjNTYxOTM0ZTA4OSRmOWU3YTZiYy1lYjYzLTQ0YzQtOGQyYS1hYTEyMmZmMTJh" />
<input type="hidden" name="__VIEWSTATE38" id="__VIEWSTATE38" value="YTMfA2hkFgICAQ9kFgJmD2QWBAIFD2QWAmYPFgIeCkNhbGxiYWNrSUQFKWN0bDAxJG1haW5Db250ZW50JGN0bDAwJFJhdGluZyRV" />
<input type="hidden" name="__VIEWSTATE39" id="__VIEWSTATE39" value="c2VyUmF0aW5nZAIHDxYCHxEFJGY5ZTdhNmJjLWViNjMtNDRjNC04ZDJhLWFhMTIyZmYxMmFhM2QCNQ8PFgYfBgURcmlnaHRzaWRl" />
<input type="hidden" name="__VIEWSTATE40" id="__VIEWSTATE40" value="IGNtc3pvbmUfBwICHwNoZGQCNw8PFgQfBgUTYWx0Y29udGVudDIgY21zem9uZR8HAgJkZAI5Dw8WBB8GBRNhbHRjb250ZW50MiBj" />
<input type="hidden" name="__VIEWSTATE41" id="__VIEWSTATE41" value="bXN6b25lHwcCAmRkAj0PDxYCHwNoZBYKAgEPDxYCHwNoZGQCAw8PFgIfA2hkZAIFDw8WAh8DaGRkAgcPDxYCHwNoZGQCCQ8PFgIf" />
<input type="hidden" name="__VIEWSTATE42" id="__VIEWSTATE42" value="A2hkZAJBDw8WAh8DaGRkGAMFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBRVjdGwwMSRQYWdlTWVudTIkY3RsMDEF" />
<input type="hidden" name="__VIEWSTATE43" id="__VIEWSTATE43" value="FWN0bDAxJFBhZ2VNZW51MSRjdGwwMQ8PZAUkY2E4YTRkMmQtYWZkMy00ZGQ2LWIxYzEtYWY0MjhiOTc4ZThjZAUVY3RsMDEkU2l0" />
<input type="hidden" name="__VIEWSTATE44" id="__VIEWSTATE44" value="ZU1lbnUxJGN0bDAwDw9kBSQ2ZWU5NzFjZC05OTU2LTRkYzMtODE2Mi1hNDg4NDEzZTdmNThk" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=x2eneDuLFQ9w4yRoi8Y5tg2&t=634230536572508135" type="text/javascript"></script>
<script type="text/javascript">var GB_ROOT_DIR = '/ClientScript/greybox/'; var GBCloseText = 'Close'; </script>
<script src="/ClientScript/mojocombined/mojocombinedfull.js" type="text/javascript" ></script>
<script src="/ClientScript/jqmojo/cycle.js" type="text/javascript" ></script>
<script src="/ScriptResource.axd?d=wCo0V0P8aplVAKjdc-kM9AvNmwrQFDA24wrkA7OkI6gOYp_VxxHWIc8VlP8L0l200&t=fffffffff615adfd" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.Services._AuthenticationService.DefaultWebServicePath = 'Authentication_JSON_AppService.axd';
Sys.Services._RoleService.DefaultWebServicePath = 'Role_JSON_AppService.axd';
//]]>
</script>
<script src="/ScriptResource.axd?d=wCo0V0P8aplVAKjdc-kM9AvNmwrQFDA24wrkA7OkI6gjdZ5z-Kq5dVZ7FGYv9jU40&t=fffffffff615adfd" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
document.getElementById('ctl01_ctl06').value = GetViewState__AspNetTreeView('ctl01_PageMenu2_ctl01_UL');
return true;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl01$ScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tctl01$PageMenu1$upMenu','tctl01$PageMenu2$upMenu'], [], [], 90);
//]]>
</script>
<div id="wrapwebsite">
<img src="top.png" border="0" width="900" height="36">
<div class="topnav">
<ul>
<li class="firstnav"><a class="sitelink homelink" href="/">Home</a></li>
<li class="topnavitem"><a class="sitelink" href="/SiteMap.aspx">Site Map</a></li>
<li class='topnavitem'><a href='/SearchResults.aspx' class='sitelink'>Search</a></li>
<li class="topnavitem"><a class="sitelink" href="/Secure/Login.aspx">Sign In</a></li>
</ul>
<a href='#startcontent' class='skiplink'>Skip over navigation</a>
<div id="ctl01_pnlStandardLogin" class="floatpanel">
</div>
<div class="addthis">
<div id="ctl01_InsecurePanel1" class="addthisbutton">
</div>
</div>
</div>
<div id="topmenu">
<div class="AspNet-Menu-Horizontal" id="ctl01_SiteMenu1_ctl00">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-Leaf AspNet-Menu-SelectedLeaf">
<a href="/home.aspx" class="AspNet-Menu AspNet-Menu-SelectedLeaf">
<img src="Data/SiteImages/FeatureIcons/house.png" alt="Home" /> Home</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/professional-products-and-services.aspx" class="AspNet-Menu">
Professional Products and Services</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/news-publications-announcements.aspx" class="AspNet-Menu">
News, Publications & Announcements</a>
</li>
</ul>
</div>
</div>
<div id="wrapheader">
<a href="/default.aspx"><img src="logo.png" border="0" width="420" height="104" align="left"></a>
<a href="Secure/Login.aspx" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('memberLogin','','ps_menu_down2.png',1)"><img src="ps_menu_up2.png" alt="Member Login" name="memberLogin" width="171" height="20" border="0" style="padding-left:270px; padding-top:0px;"></a><br />
<!--<a href="products-and-services.aspx" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('productsServices','','ps_menu_down.png',1)"><img src="ps_menu_up.png" alt="Access Products & Services" name="productsServices" width="171" height="20" border="0" style="padding-left:95px;"></a>-->
<a href="professional-products-and-services.aspx"><img src="productServicesNav.jpg" border="0" width="203" height="37" style="padding-left:200px; padding-top:54px;"></a>
<!--
<h1 class='art-Logo-name art-logo-name siteheading'><a class='siteheading' href='http://njcul.org/Default.aspx'>New Jersey Credit Union League</a></h1>
<div id="ctl01_spanel1" class="rotatecontainer">
<img id="ctl01_imgs1" class="rotateitem" src="/Data/Sites/1/skins/InnerTemplate/head1.jpg" alt=" " style="border-width:0px;" />
<img id="ctl01_imgs2" class="rotateitem" src="/Data/Sites/1/skins/InnerTemplate/head2.jpg" alt=" " style="border-width:0px;" />
<img id="ctl01_imgs3" class="rotateitem" src="/Data/Sites/1/skins/InnerTemplate/head3.jpg" alt=" " style="border-width:0px;" />
</div>
-->
</div>
<div id="outercontainer">
<div id="ctl01_PageMenu1_upMenu">
<div class="AspNet-Menu-Horizontal" id="ctl01_PageMenu1_ctl01">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-Leaf">
<a href="/consumer-advocacy.aspx" class="AspNet-Menu">
Consumer Advocacy</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/compliance.aspx" class="AspNet-Menu">
Compliance</a>
</li>
<li class="AspNet-Menu-Leaf AspNet-Menu-SelectedLeaf">
<a href="/education--events.aspx" class="AspNet-Menu AspNet-Menu-SelectedLeaf">
Education & Events</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/government-affairs.aspx" class="AspNet-Menu">
Government Affairs</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/news.aspx" class="AspNet-Menu">
News</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/about-us.aspx" class="AspNet-Menu">
About Us</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="/nj-credit-union-foundation.aspx" class="AspNet-Menu">
Foundation </a>
</li>
</ul>
</div>
</div>
<div id="innercontainer">
<div id="wrapcenter">
<div id="ctl01_divLeft" class="art-layout-cell art-sidebar1 leftside left2column cmszone">
<div id="gutter">
<div id="ctl01_PageMenu2_upMenu">
<div class="AspNet-TreeView" id="ctl01_PageMenu2_ctl01">
<ul id="ctl01_PageMenu2_ctl01_UL">
<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf">
<a href="/calendar-of-events.aspx">
Calendar of Events</a>
</li>
<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf">
<a href="/chapter-meetings.aspx">
Chapter Meetings</a>
</li>
<li class="AspNet-TreeView-Root">
<a class="AspNet-TreeView-Expand" onclick="__doPostBack('ctl01$PageMenu2$ctl01','p881f14ca-1b44-4b61-a6bd-296374732df5'); return false;" href="/special-events.aspx" title="Expand this node."> </a>
<a href="/special-events.aspx">
Special Events</a>
</li>
<li class="AspNet-TreeView-Root">
<a class="AspNet-TreeView-Expand" onclick="__doPostBack('ctl01$PageMenu2$ctl01','p3d1a0fee-1957-40f0-8e32-713238d39b89'); return false;" href="/educational-sessions.aspx" title="Expand this node."> </a>
<a href="/educational-sessions.aspx">
Educational Sessions</a>
</li>
<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf">
<a href="/special-cu-director-volunteer-programs.aspx">
Special CU Director & Volunteer Programs</a>
</li>
<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf">
<a href="/cuna-learning-opportunities.aspx">
CUNA Learning Opportunities</a>
</li>
<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf">
<a href="/yib.aspx">
Youth Involvement Board Scholarship Program</a>
</li>
<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf">
<a href="/els.aspx">
Executive Leadership Series</a>
</li>
<li class="AspNet-TreeView-Root">
<a class="AspNet-TreeView-Expand" onclick="__doPostBack('ctl01$PageMenu2$ctl01','p631aad37-ccae-491a-a7b0-827739ac566a'); return false;" href="/certificateprograms.aspx" title="Expand this node."> </a>
<a href="/certificateprograms.aspx">
Certificate Programs</a>
</li>
<li class="AspNet-TreeView-Root AspNet-TreeView-Leaf AspNet-TreeView-Selected">
<a href="/college-resource-center.aspx">
College Resource Center</a>
</li>
</ul>
</div>
</div>
</div>
<!---->
<a id="startcontent"></a>
</div>
<div id="ctl01_divCenter" class="art-layout-cell art-content center-leftmargin cmszone">
<div id="ctl01_Breadcrumbs_pnlWrapper" class="breadcrumbs">
<span id="ctl01_Breadcrumbs_breadCrumbsControl"><span>
<a id="ctl01_Breadcrumbs_breadCrumbsControl_ctl00_lnkNode" class="unselectedcrumb" href="/home.aspx">Home</a>
</span><span> > </span><span>
<a id="ctl01_Breadcrumbs_breadCrumbsControl_ctl02_lnkNode" class="unselectedcrumb" href="/education--events.aspx">Education & Events</a>
</span><span> > </span><span>
<a id="ctl01_Breadcrumbs_breadCrumbsControl_ctl04_lnkCurrent" class="selectedcrumb" href="/college-resource-center.aspx">College Resource Center</a>
</span></span>
</div>
<div id="ctl01_mainContent_ctl00_pnlContainer" class="module241">
<div id="ctl01_mainContent_ctl00_pnlWrapper" class="art-Post-inner panelwrapper htmlmodule">
<a id='module241' class='moduleanchor'></a><h2 class="art-PostHeader moduletitle">CUStudentLoans.org College Resource Center <a class="ModuleEditLink"></a></h2>
<div class=" modulecontent">
<div id="ctl01_mainContent_ctl00_divContent" class="slidecontainer">
<style>
/* Edit the font family and width of overall content */
#cusl-page { font-family: 'Lucida Grande', Lucida, Arial, sans-serif; font-size: 62.5%; width: 630px; }
/* Link colors */
#cusl-page a { color: #004a80; }
/* Header image */
#cusl-page #header { display:none !important; }
/* Heading text color */
#cusl-content h2 { color: #0e6c55; font-size:18px; }
#cusl-page aside h3 a { font-size:16px }
#cusl-page aside h2 { font-size:18px; }
#cusl-content article h3 a { font-size:20px; line-height:26px !important; }
</style>
<script src="https://www.custudentloans.org/javascripts/cusl-page.js"></script>
<script>
new CUSL.Page({
count: 5, // defaults to 7
cu_url: 'http://www.custudentloans.org'
}).render();
</script>
<div id="footer">
<p><a target="_blank" href="http://www.custudentloans.org/student/college-financing-101">Learn more about Private Student Loans at <em>Ken's Korner</em></a></p>
</div>
</div>
</div>
<div class="modulefooter"></div>
<div class="cleared"></div>
</div>
</div>
</div>
</div>
<div id="ctl01_divAlt1" class="altcontent2 cmszone">
</div>
<div id="ctl01_divAltContent2" class="altcontent2 cmszone">
</div>
<div id="wrapfooter">
<img src="footerImage.png" border="0" width="900" height="134">
© 2008 - 2011 New Jersey Credit Union League |
<a href="/privacy-policy.aspx">Privacy Policy</a> | Design and Website by: <a href="http://www.greylockmarketing.com/" target="_blank">Greylock Marketing</a> & <a href="http://www.socialboostmedia.com/" target="_blank">Social Boost Media</a>
<br /> <br />
</div>
</div>
</div>
</div>
<script type="text/javascript">
function HideMenuToolbar(){ $("#toolbar").fadeOut(); $("#toolbarbut").fadeIn("slow");}
function ShowMenuToolbar(){ $("#toolbar").fadeIn(); $("#toolbarbut").fadeOut("slow");}
$(document).ready(function(){
$("span.downarr a").click(function() {HideMenuToolbar(); Set_Cookie('openstate', 'closed')});
$("span.showbar a").click(function() {ShowMenuToolbar(); Set_Cookie('openstate', 'open') });
$("span.downarr a, span.showbar a").click(function() { return false; });
var openState = Get_Cookie('openstate');
if(openState != null){ if(openState == 'closed'){HideMenuToolbar();} if(openState == 'open'){ShowMenuToolbar();}}
});
</script>
<div>
<input type="hidden" name="ctl01$ctl06" id="ctl01_ctl06" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQKv1e3VCALs75XzDgL+qaz3AwLv26TNCQKS/MC2Dg==" />
</div>
<script type="text/javascript">Sys.Application.add_load(function() { var form = Sys.WebForms.PageRequestManager.getInstance()._form; form._initialAction = form.action = window.location.href; }); </script>
<script type="text/javascript">
//<![CDATA[
(function() {var fn = function() {$get("ctl01_ScriptManager1_HiddenField").value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();
WebForm_InitCallback();//]]>
</script>
<script type="text/javascript" > $('div.mojo-accordion').accordion({fx:{opacity:'toggle',duration:'fast'}}); $('div.mojo-accordion-nh').accordion({fx:{opacity:'toggle',duration:'fast'},autoHeight:false}); $('div.mojo-tabs').tabs({fx:{opacity:'toggle',duration:'fast'}}); $('input.jqbutton').button(); </script>
<script type="text/javascript">$('#ctl01_spanel1').cycle({fx:'fade',speed:1000,timeout:3000,next:'#ctl01_spanel1'});</script>
<script type="text/javascript">
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"));
</script>
<script type="text/javascript">
try{
var mojoPageTracker = _gat._getTracker("UA-19333588-1");
mojoPageTracker._setCustomVar(1, "member-type", "anonymous", 1);mojoPageTracker._trackPageview();
} catch(err) {} </script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>
</form>
</body>
</html>
回答1:
The problem is that Firefox doesn't like your form element for some reason. It strips it out and then tries to correct an error, which results in the aside being closed too early as you've reported.
I had to go through and close all of your hr, br, img, and input tags so that I could rule out those as being bugs. Afterwards, I started a process of elimination where I removed sections of this HTML until the content positioned itself correctly. By a process of elimination, tearing everything down until the problem went away followed by slowly building it back up to the point where everything else is in place and rendering okay, I narrowed the problem to your form tag.
I can't see anything in the form tag that would indicate a problem, but judging by the amount of unclosed tags I found, I wouldn't be surprised if a series of technical debt issues are cascading bugs throughout the site.
http://www.codinghorror.com/blog/2009/02/paying-down-your-technical-debt.html
Here you can see that I used HTML comments to comment out your form opening and close tag:
cusl-page.js:
<!--<form action="' + finaid + 'calculators/scripts/loanpayments.cgi" method="POST">-->\
<input type="hidden" name="calctype" value="loan_payments" />\
<input type="hidden" value="tables" name="output_format" />\
<dl>\
<dt><label for="loan_balance">Loan Balance</label></dt>\
<dd><input id="loan_balance" size="12" value="" name="loan_balance"/></dd>\
<dt><label for="loan_interest_rate">Interest Rate</label></dt>\
<dd><input id="loan_interest_rate" size="5" value="6.8%" name="loan_interest_rate"/></dd>\
<dt><label for="loan_fees">Loan Fees</label></dt>\
<dd><input id="loan_fees" size="5" value="0.0%" name="loan_fees"/></dd>\
<dt><label for="loan_term_in_years">Loan Term (Years)</label></dt>\
<dd><input id="loan_term_in_years" maxlength="5" size="2" value="10" name="loan_term_in_years"/></dd>\
<dt><label for="minimum_payment">Minimum Payment</label></dt>\
<dd><input id="minimum_payment" size="4" value="$50" name="minimum_payment"/></dd>\
<dt><label for="enrollment_status">Enrollment Status</label></dt>\
<dd><select id="enrollment_status" size="1" name="enrollment_status">\
<option selected="" value="">Not Specified</option>\
<option value="Still in School">Still in School</option>\
<option value="Graduating Soon">Graduating Soon</option>\
<option value="In Repayment">In Repayment</option></select></dd>\
<dt><label for="degree_program">Degree Program</label></dt>\
<dd><select id="degree_program" size="1" name="degree_program">\
<option selected="" value="">Not Specified</option>\
<option value="Associate\'s Degree">Associate\'s Degree</option>\
<option value="Bachelor\'s Degree">Bachelor\'s Degree</option>\
<option value="Master\'s Degree">Master\'s Degree</option>\
<option value="Ph.D.">Ph.D.</option>\
<option value="Lawyer (LLB or JD)">Lawyer (LLB or JD)</option>\
<option value="Doctor (M.D.)">Doctor (M.D.)</option></select></dd>\
<dt><label for="fte_enrollment">Total Years in College</label></dt>\
<dd><input id="fte_enrollment" size="4" value="" name="fte_enrollment"/></dd>\
<dt>Print payment schedule?</dt>\
<dd>\
<input id="yes" type="radio" value="yes" name="print_schedule"/>\
<label for="yes">Yes</label>\
<input id="no" type="radio" checked value="no" name="print_schedule"/>\
<label for="no">No</label>\
</dd>\
</dl>\
<button type="submit">Calculate</button>\
<!--</form>--></div>\
Below is a screenshot of the page rendering correctly in Firefox 3.6 with the form tags commented. Note this is on my local server, not the live site:
Understand that I've spent over two hours working on this, and we still haven't even touched Internet Explorer yet. Knowing how IE is, it may take even longer to get this working for you.
Unfortunately, this code is so cluttered with a mixture of JavaScript and HTML that it will make this impossible to maintain. I don't know if you inherited it from someone else or wrote it yourself, but it will eventually need to be rewritten or cleaned up somehow.
I know you are under a deadline and don't have time to rebuild this now, so I offer the following workaround:
- A workaround to meet your goal would be to use some other method to submit that form data, such as AJAX, and leave that form tag commented.
You could also go through your code and close any other br, hr, img, input, and any other tags that need to be self-closed, like in these examples below:
Self closing tags need to be explicitly closed:
<!-- note the self-closing slashes on the ends -->
<img src="/image.jpg" />
<br />
<input type="text" value="" />
Running this through a validator would be helpful as well to identify anything that may cause the browser's HTML parsers to be unable to properly parse the document.
No matter what, these types of problems involve commenting lines of HTML until the problem is narrowed to a certain block of code. By having a more modular design that respects the rules of keeping your content (HTML), behavior (JavaScript), and presentation (CSS) completely separate, you eliminate the need to go on these wild goose chases as the problems will be easier to track down.
Good luck! I hope this answer helps you solve this stubborn problem.
回答2:
To your first problem: your page doesn't have an approriate DOCTYPE declaration, so IE refuse to render it. After I change that, IE renders the page (though still incorrectly). Hope this helps.
You can reference this link: http://www.w3.org/QA/2002/04/valid-dtd-list.html
来源：https://stackoverflow.com/questions/4699430/debugging-html-javascript-with-firebug