Question

My html form is:

<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 -->

and my css for the above html is:

#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; }

There are two problems;

1. In IE6, the account-box div goes to the end of the page and not to the bottom of the current resolution. It works as a footer in IE6.
2. In IE6 and IE7, when I am using the sprite, it does not change the sprite when the text input is focused.

Answer 1

IE6 doesn’t support position:fixed.

IE6 and IE7 doesn’t support the :focus pseudo class.

You could use position: absolute; position: fixed; to get partical functionality in IE6, that would at least place the element somewhere instead of stretching it.

You would need to use events to handle the focus/blur to get it to work in IE6 and IE7.