Плавающие элементы опускаются ниже плавающего ввода в UL в IE - но в Chrome все нормально

Я работаю над этим около часа, и я не могу на всю жизнь понять, почему это происходит в IE.

У меня есть следующий HTML-код, чтобы показать мою регистрационную форму (выдержка):

<ul id="register_form_list">
    <li><label for="register_full_name" class="register_label">Full Name</label></li>
    <li class="input_wrapper">
        <input type="text" class="register_text_input" name="full_name" id="register_full_name" value="">
        <div class="register_field_help">
            <span class="register_field_error_text" style="display: none">Enter your first and last name</span>
        </div>
            <div class="register_field_error">
        <span class="register_field_error_text">Please enter your full name</span>
    </div>
    </li>
</ul>

У меня есть следующий CSS, для показа моих элементов регистрации и "подсказок", которые я создал:

ul#register_form_list { float: left; clear: left; margin: 25px 0 0 29px; width: 670px; }
ul#register_form_list li { float: left; clear: left; display: inline; margin-left:0px; }
ul#register_form_list li.input_wrapper { padding: 0 0 15px 0; }
label.register_label { float: left; font-size: 0.9em; font-weight: bold; color: #093C5D; text-decoration: none; }
ul#register_form_list input.register_text_input { float: left; clear: left; margin: 6px 0 0 0; padding: 5px; width: 260px; border: #B0B0B0 1px solid; background: #FFFFFF url(images/quizmaker/field_shadow_bg.png) repeat-x; background-position: top; outline: none; font-family: Arial, sans-serif; }
ul#register_form_list input.register_submit { float: left; clear: left; margin: 0 0 0 0; padding: 5px 14px 5px 14px; }
div.register_field_help { float: left; display: none; margin: 0 0 0 6px; width: 386px; height: 39px; background: url(images/welcome/register_text_help.png) top left no-repeat; }
span.register_field_help_text { float: left; margin: 10px 0 0 20px; color: #FFFFFF; }
div.register_field_error { float: left; margin: 0 0 0 6px; width: 386px; height: 39px; background: url(images/welcome/register_text_error.png) top left no-repeat; }
span.register_field_error_text { float: left; margin: 10px 0 0 20px; color: #FFFFFF; }

По какой-то причине div.register_field_error элементы подсказки div.register_field_error снижаются ниже моих полей input, когда я хотел бы, чтобы они отображались бок о бок.

Он отлично работает в Chrome, в моей ul достаточно ширины для размещения всплывающих подсказок (670px), но мне нужно настроить ul на width: 733px или более в инструментах разработчика, чтобы они отображались бок о бок в IE.

Код здесь живой, просто нажмите "Зарегистрировать", не заполняя ни один из элементов ввода, и всплывающие подсказки отображаются каждым элементом ввода.

Это как если бы у UL было какое-то правостороннее дополнение на нем, но я попробовал margin:0 и padding:0 на UL для тестирования, и это не сработало.

Похоже, что эта проблема возникает, когда у меня IE11 эмуляция IE7. Я хотел бы, чтобы сайт работал в IE7