Debugging Html & Javascript With Firebug

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

Solution 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">-->\
          <inputtype="hidden"name="calctype"value="loan_payments" />\
          <inputtype="hidden"value="tables"name="output_format" />\
          <dl>\
            <dt><labelfor="loan_balance">Loan Balance</label></dt>\
            <dd><inputid="loan_balance"size="12"value=""name="loan_balance"/></dd>\
            <dt><labelfor="loan_interest_rate">Interest Rate</label></dt>\
            <dd><inputid="loan_interest_rate"size="5"value="6.8%"name="loan_interest_rate"/></dd>\
            <dt><labelfor="loan_fees">Loan Fees</label></dt>\
            <dd><inputid="loan_fees"size="5"value="0.0%"name="loan_fees"/></dd>\
            <dt><labelfor="loan_term_in_years">Loan Term (Years)</label></dt>\
            <dd><inputid="loan_term_in_years"maxlength="5"size="2"value="10"name="loan_term_in_years"/></dd>\
            <dt><labelfor="minimum_payment">Minimum Payment</label></dt>\
            <dd><inputid="minimum_payment"size="4"value="$50"name="minimum_payment"/></dd>\
            <dt><labelfor="enrollment_status">Enrollment Status</label></dt>\
            <dd><selectid="enrollment_status"size="1"name="enrollment_status">\
              <optionselected=""value="">Not Specified</option>\
              <optionvalue="Still in School">Still in School</option>\
              <optionvalue="Graduating Soon">Graduating Soon</option>\
              <optionvalue="In Repayment">In Repayment</option></select></dd>\
            <dt><labelfor="degree_program">Degree Program</label></dt>\
            <dd><selectid="degree_program"size="1"name="degree_program">\
              <optionselected=""value="">Not Specified</option>\
              <optionvalue="Associate\'s Degree">Associate\'s Degree</option>\
              <optionvalue="Bachelor\'s Degree">Bachelor\'s Degree</option>\
              <optionvalue="Master\'s Degree">Master\'s Degree</option>\
              <optionvalue="Ph.D.">Ph.D.</option>\
              <optionvalue="Lawyer (LLB or JD)">Lawyer (LLB or JD)</option>\
              <optionvalue="Doctor (M.D.)">Doctor (M.D.)</option></select></dd>\
            <dt><labelfor="fte_enrollment">Total Years in College</label></dt>\
            <dd><inputid="fte_enrollment"size="4"value=""name="fte_enrollment"/></dd>\
            <dt>Print payment schedule?</dt>\
            <dd>\
              <inputid="yes"type="radio"value="yes"name="print_schedule"/>\
              <labelfor="yes">Yes</label>\
              <inputid="no"type="radio"checkedvalue="no"name="print_schedule"/>\
              <labelfor="no">No</label>\
            </dd>\
          </dl>\
          <buttontype="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 --><imgsrc="/image.jpg" /><br /><inputtype="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.

Solution 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