Question

I have a login form using a UL and jQuery Validate. It looks fine in all browsers except IE7 (not worried about IE6 & below)

In IE7 the li that wraps the label.error, shows the full height even though the label.error is hidden at that stage.

Please can anyone help me, I haven’t found a way to solve this with CSS, and I don’t want to resort to jQuery for something so simple.

Here is the url, http://clintongreen.com/clients/researchreview/ the login form is shown when you click on “login” in the top right-hand side

Thanks

Answer 1

I would first try putting each error label in the same list item as its input:

<li><input type="text" name="login_username" id="login_username" placeholder="Username ">
    <label class="error" for="login_username" style="display:none;">Please enter your username</label></li>

That would eliminate the “empty” list item causing the extra line break. If the size of the login box is set, the message should wrap to the next line when displayed. (You could even specify display:block instead of the default display:inline).

Personally I wouldn’t use an unordered list for form fields, I’d use a fieldset and (in this case) give the inputs and labels fixed width and display: block. But that’s just me.

…I should ask…is changing the html like this an option?