Проблемы с всплывающей формой в разных браузерах

[mankutila]

Доброго времени суток.

 

Имеется сайт на тестовом домене
На главной странице есть кнопки, по наведению на них появляется (-ются) форма (-ы). Так вот, с этими формами обнаруживаются несколько проблем в разных браузерах:

 

1) в IE 11 этой формой невозможно пользоваться - она просто не реагирует ни на какие действия. Плюс, в исходном коде обнаруживаются какие-то закрывающие теги для всех <input type="text">

 

2) в FF ввод данных в формы просто осложнен: начинаешь вводить одну букву, две и инпут тут же теряет фокус, я не понимаю, с чем это связано.

 

В хроме все работает. Хотя и там есть нюанс: почему инпут держит фокус только тогда, когда на нем стоит указатель мыши?

 

Если кто-нибудь сталкивался с такими проблемами или знает, что с этим делать, помогите пожалуйста. Спасибо.

 

UPD: форма так себя ведет, потому что добавляется внутрь элемента, по которому кликают - функция появления формы вызывается снова и снова, надо думать, как добавить форму вне кнопки, но еще и позиционировать ее относительно ее

Edited May 26, 2015 by mankutila

[Great Rash]

В коде в блоке .buttons я вижу незакрытые <p>, их конечно необязательно закрывать по правилам, но вы всё же попробуйте, вдруг поможет. А то какие-то странности: инспектор показывает, что формы у вас лежат в том же блоке, а CTRL+U показывает, что они у вас в самом низу. Ну и в целом там в <p> нет необходимости.

[mankutila]

В коде в блоке .buttons я вижу незакрытые <p>, их конечно необязательно закрывать по правилам, но вы всё же попробуйте, вдруг поможет. А то какие-то странности: инспектор показывает, что формы у вас лежат в том же блоке, а CTRL+U показывает, что они у вас в самом низу. Ну и в целом там в <p> нет необходимости.

Это не странности, в исходном состоянии формы в самом низу скрыты, но по наведению на кнопки jquery .append() они перемещаются и становятся видимыми