IE7 - input fields do not receive focus

<form id="user-login" method="post" action="/SignIn">
    <div>
        <div id="edit-name-wrapper" class="form-item">
            <label for="emailAddress">Email Address: <span title="This field is required." class="form-required">*</span></label>
            <%=Html.TextBox("emailAddress", null, new { @class="form-text required", tabindex = 1, size = 60, maxlength = 60 }) %>
            <%=Html.ValidationMessage("emailAddress") %>
            <div class="clear"></div>
        </div>
        <div id="edit-pass-wrapper" class="form-item">
            <label for="password">Password: <span title="This field is required." class="form-required">*</span></label>
            <%=Html.Password("password", null, new { @class="form-text required", tabindex = 2, size = 60, maxlength = 60 }) %>
            <%=Html.ValidationMessage("password") %>
            <div class="clear"></div>
        </div>
        <input type="image" src="/content/images/submit-B-btn.p开发者_运维技巧ng" class="form-submit" tabindex="3" id="edit-submit" value="Log in" name="submit">
        <a class="forgot-password-link" href="/ForgottenPassword"><strong>Forgotten your password? &gt;&gt; </strong></a>
    </div> </form>

...renders the two-field form exactly as expected in IE8 (plus chrome,ff...). In particular you can click in either input box and the focus goes to it. In IE7 however, this is not the case - mouse clicking within either input field does nothing.

Does anyone know how to get the input focus to work for IE7/6..?

UPDATE - this is definately a CSS issue, as when I turned off CSS from Developer Tools, it worked in IE7. So the Q now is, how do I change the code to target different .css files (i.e. a specific one for IE6/7, & another for everything else)?

There is no reason why input focus would not work in itself. A plausible reason would be that you have placed an element on top of the field, so that you can't reach it by clicking.

You can set a background color on elements that you suspect might cover the field, to see exactly how large they really are in different browsers.

In my case, removing the following CSS solved the problem:

.clear { clear: both; }
.clearLeft { clear: left; }
.clearRight { clear: right; }

.clear,
.clearLeft,
.clearRight
{ height: 0; }