JQuery проблема с Chrome против IE

Question

function runComplete() {
    var $elem=$(document.getElementById('quiz_section'));
    var center="<br /><h1>Your Score:</h1><h2>"+document.getElementById('quiz_score').innerHTML+"</h2><br /><br /><br /><a href='javascript:location.reload(true)'><h5>Try Again?</h5></a>";
    $elem.html('<form id="comp" style="width:33.333333%;height:1px;background-color:lightblue;border=1px solid #000000;pading:10px">'+center+'</form>');
    var theight=$elem.height()+20;
    $elem.css('height','1px');
    $elem.animate({height:theight});
}

В IE приведенный выше код работает отлично! В Chrome ... эх ... не так много.

Предполагается, что он оживляет форму и заставляет ее "падать", а не изменяет ее размер. Я использую очень похожую технику (ту же анимацию) в других местах моего кода, и все это прекрасно работает в Chrome, это единственное, что не оживляет. Есть идеи?

Вот демоверсия викторины:

http://dalexl.tripod.com/HTMLQUIZ.htm

Answer 1

Как я сказал в комментарии, и выяснилось, что это была проблема, я выкладываю это здесь:)

Плохой встроенный стиль был добавлен с border= вместо border:

Btw. Я создал jsfiddle , чтобы поиграть с ним.

Answer 2

Вы должны позвонить $elem.hide().slideDown() вместо.