CSS-позиционирование с помощью Firefox

Question

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

У меня есть страница с несколькими контейнерами div, которые разделяют поля ввода и
пусть они хорошо выглядят

Проблема:
Хотя все выглядит хорошо в Safari / Opera / Chrome, коробки выглядят странно
на Firefox .

Я публикую правильные части HTML и CSS, а также URL готовой страницы и
картина, как выглядит правильная и неправильная версия.

Я был бы рад, если бы кто-то разъяснил мне общую ошибку, чтобы я смог
избежать этого в будущем.

Спасибо, что читаете :)

<div id="inner_content_big">
    <div style="width: 900px; margin: 0 auto; ">
        <div class="box_login_banner">
            <h1>Login, Welcome :]</h1>
        </div>
        <div style=" clear: both; "></div>
        <div class="box_login_container">
            <?
            $data_form['class'] = 'form_login';
            ?>
            <?= form_open( 'user/login', $data_form ); ?>
            <div class="box_login_inputs">
                <div id="input_container">
                    <div id="input_label">
                        <h4>Email</h4>
                    </div>
                    <input type="input" name="login_username" id="login_special_input" class="validate[required,length[0,100]]" />
                    <div id="input_hint">
                        <h5>This is the address you specified while registering.</h5>
                    </div>
                </div>
            </div>
            <div style="clear: both;"></div>
            <div class="box_login_inputs">
                <div id="input_container">
                    <div id="input_label">
                        <h4>Password</h4>
                    </div>
                    <input type="password" name="login_password" id="login_special_input" class="validate[required,length[0,100]]" />
                    <div id="input_hint">
                        <h5>Please remember that the password is <u>case sensitive</u>.</h5>
                    </div>
                </div>
            </div>
            <?= form_close(); ?>
        </div>
        <div class="box_login_right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in voluptate velit esse cillum dolore eu fugiat nulla pariatur laborum.
</div>
        <div style="float: left; ">
            <a class="css_button steelblue" href="#" id="button_submit">
                <span>Login</span>
            </a>
            <a class="css_button pink" href="#download" id="button_forgot_password">
                <span>Forgot your Password?</span>
            </a>
        </div>
        <div style="float: right; margin-right: 6px; ">
            <a class="css_button orange" href="#" id="button_no_account">
                <span>No account?</span>
            </a>
        </div>
        <?php if ( @$error_message != '' ): ?>
        <div class="redcssboxes box_login_infobox">
            <p>
                <img src="<?= base_url(); ?>images/header/error.png" />
                <?= $error_message; ?>
            </p>
        </div>
        <?php endif ?>
    </div>

.box_login_banner {
    float: left;
    margin-left: -26px;
    width: 939px;
    height: 50px;
    border-bottom: 1px solid #DDD;
}

.box_login_banner h1 {
    font-size: 28px;
    color: #888;
    margin-left: 30px;
    margin-top: -12px;
}


.box_login_container {
    float: left;
    margin-top: 40px;
    height: 200px;
    width: 440px;
}

.box_login_right {
    float: right;
    margin-top: 40px;
    margin-right: 14px;
    height: 200px;
    width: 420px;
}

.box_login_inputs {
    width: 888px;
    height: 100px;
    margin-top: -26px;
    margin-right: 0px;
}

.box_login_container #input_label {
    margin-left: 4px;
    width: 300px;
    height: 30px;
}

.box_login_container #input_label h4 {
    color: #888;
    font-weight: bold;
}

.box_login_container #input_container {
    float: left;
    margin-top: 10px;
    margin-left: 20px;
    width: 400px;
    height: 120px;
}

.box_login_container #input_container input {
    margin-top: -5px;
}

.box_login_container #input_hint {
    margin-top: -10px;
    margin-left: 4px;
    width: 100%;
    height: 20px;
}

.box_login_container #input_hint h5 {
    font-size: 12px;
    color: #999;
}


#login_special_input {
    color: #777;
    font-size:26px;
    width:97%;
    margin-top:2px;
    margin-right:6px;
    margin-bottom:16px;
    border:1px solid #e5e5e5;
    background:#fbfbfb;
    padding:3px;
}

Answer 1

удаление {float: left} реквизита .box_login_container #input_container даст желаемый результат

Обновлена ​​и исправлена ​​скрипка: http://jsfiddle.net/Zg7tH/1/

помните предложения для класса и идентификаторов

причины:

.box_login_inputs{ margin-top: -26px;} -> вызывая его скольжение вверх и
.box_login_container #input_container {float:left} -> , заставляя его течь вместе с предыдущими элементами

Answer 2

login_special_input, input_container и т. Д. Являются идентификаторами.

Вы не можете использовать один и тот же идентификатор для двух разных элементов.Измените их на классы.