jQuery validation formatting Issue in IE

Question

In firefox, the error messages display as should. Just to the right of the element being validated. In IE. No matter what I do with the sizing of the labels/elements/errors, the error is always posted below the element, causing every other element to be pushed down.

<p>
   <label for="handle"><strong>User Name</strong></label>
   <INPUT NAME="handle" id="handle" VALUE="#attributes.getUser.handle#">
</p>       
<p>
   <label for="password"><strong>Password</strong></label>
   <INPUT TYPE="TEXT" id="password" NAME="password"
          MAXLENGTH=50 VALUE="#attributes.getUser.password#">
</p>

<p>
    <label for="confirmPassword"><strong>Confirm Password</strong></label>
    <INPUT TYPE="TEXT" id="confirmPassword" NAME="confirmPassword"
           MAXLENGTH=50 VALUE="#attributes.getUser.password#">
</p>

If anyone else has had this issue, i'd be very grateful for any help.

Answer 1

Have you tried closing your <input> elements?

Answer 2

If you haven't already, you might want to ensure that the page is valid XHTML (I use HTML Validator). That should ensure that all of your elements are properly closed and nested.

Also, have you tried using CSS positioning for the elements, like setting the display to be inline?

Without seeing the code it's difficult to say. If it's a positioning issue, Firebug is usually pretty helpful.

Answer 3

I had a style of 'margin-bottom: 16px' set on those input elements.

Removing that (after hours of trial and error and searching) fixed the problem.

Hope that saves someone the hours. ;^)