Проблема в том, что Firefox по какой-то причине не нравится ваш элемент формы. Он удаляет его, а затем пытается исправить ошибку, в результате чего боковая сторона закрывается слишком рано, как вы сообщили.
Мне пришлось пройти и закрыть все ваших тегов hr, br, img и input, чтобы я мог исключить их как ошибки. После этого я начал процесс исключения, где я удалял разделы этого HTML, пока содержимое не расположилось правильно. В процессе устранения, снося все до тех пор, пока проблема не исчезла, а затем медленно восстанавливая ее до точки, где все остальное находится на своем месте, и отрисовывая в порядке, я сузил проблему до вашего тега form . 1007 *
Я не вижу в теге формы ничего, что указывало бы на проблему, но, судя по количеству найденных мной незакрытых тегов, я не удивился бы, если бы серия технических долгов каскадные ошибки по всему сайту.
http://www.codinghorror.com/blog/2009/02/paying-down-your-technical-debt.html
Здесь вы можете видеть, что я использовал комментарии HTML, чтобы закомментировать тег открытия и закрытия формы:
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>\
Ниже приведен скриншот правильного отображения страницы в Firefox 3.6 с закомментированными тегами формы. Обратите внимание, что это на моем локальном сервере, а не на действующем сайте:
Поймите, что я потратил на это более двух часов, а мы еще даже не коснулись Internet Explorer. Зная, как работает IE, может потребоваться еще больше времени, чтобы это сработало для вас.
К сожалению, этот код настолько загроможден смесью JavaScript и HTML, что сделать его невозможным для поддержки. Я не знаю, унаследовал ли ты это от кого-то другого или написал сам, но в конечном итоге его придется как-то переписать или почистить.
Я знаю, что у вас установлен крайний срок, и у вас нет времени, чтобы восстановить его сейчас, поэтому я предлагаю следующий обходной путь:
- Обходной путь для достижения вашей цели - использовать какой-либо другой метод для отправки данных этой формы, например, AJAX, и оставить этот тег комментария.
Вы также можете просмотреть свой код и закрыть любые другие теги br, hr, img, input и любые другие теги, которые необходимо замкнуть самостоятельно, как в следующих примерах:
Самозакрывающиеся теги должны быть явно закрыты:
<!-- note the self-closing slashes on the ends -->
<img src="/image.jpg" />
<br />
<input type="text" value="" />
Выполнение этого через валидатор также будет полезно для выявления всего, что может привести к тому, что анализаторы HTML браузера не смогут правильно проанализировать документ.
Независимо от того, что эти типы проблем включают комментирование строк HTML, пока проблема не сузится до определенного блока кода. Имея более модульный дизайн, в котором соблюдаются правила полного разделения вашего контента (HTML), поведения (JavaScript) и представления (CSS), вы избавляете от необходимости идти на эти дикие погони, так как проблемы будут легче отслеживать вниз.
Удачи! Я надеюсь, что этот ответ поможет вам решить эту упрямую проблему.