спрайты css: не работают правильно в IE6 и IE7

Question

Моя HTML-форма:

<div id="account-box">
        <form method="post">
            <label for="username">Username:&nbsp;<span class="input-bg"><input class="login-input" name="loginUser" type="text" /></span></label>&nbsp;&nbsp;
            <label for="password">Password:&nbsp;<span class="input-bg"><input class="login-input" name="loginPass" type="password" /></span></label>
            <input class="submit-button" type="submit" value="Login" />
            <a href="#">Register</a>&nbsp;&nbsp;<a href="#">Forgot Password</a>
        </form> <!-- End of form -->
    </div> <!-- End of account-box div -->

и мой CSS для приведенного выше HTML:

#account-box { padding-top:10px; width:100%; text-align:center; background:url(images/account-bg.jpg) repeat-x; position:fixed; bottom:0; height:35px;  font-weight:bold; }


#account-box .login-input { color:#444; padding:3px 5px; width:153px; height:19px; border:0; background:url(images/textbox.png) 0 0 no-repeat; }
#account-box .login-input:focus { background:url(images/textbox.png) 0 -25px no-repeat; }


#account-box .submit-button { width:60px; padding:1px; border:2px solid #06c; }
#account-box .submit-button:focus { border:2px solid #900; }

Есть две проблемы;

1. В IE6 div-файл account-box переходит в конец страницы, а не в конец текущего разрешения. Он работает как нижний колонтитул в IE6.
2. В IE6 и IE7, когда я использую спрайт, он не меняет спрайт, когда фокус ввода текста сфокусирован.

Answer 1

IE6 не поддерживает position:fixed.

IE6 и IE7 не поддерживают псевдокласс :focus.

Вы можете использовать position: absolute; position: fixed; для получения частичной функциональности в IE6, которая, по крайней мере, поместит элемент куда-нибудь, а не растянет его.

Вам потребуется использовать события для обработки focus / blur, чтобы заставить его работать в IE6 и IE7.