Firefox absolute positioning issue

Question

I am having trouble rendering this in firefox. It is perfectly drawn in chrome and safari.

<div style="" id="login_inline"> <form accept-charset="utf-8" action="/users/login" method="post" id="UserLoginForm"> <div style="display:none;"> <input type="hidden" value="POST" name="_method"> </div> <input type="text" id="UserDummyEmail" tabindex="1" value="Email" name="data[User][dummyEmail]" style="display: block;"> <input type="text" id="UserDummyPassword" tabindex="2" value="Password" name="data[User][dummyPassword]" style="display: block;"> <input type="text" id="UserEmail" maxlength="255" tabindex="3" name="data[User][email]"> <input type="password" id="UserPassword" tabindex="4" name="data[User][password]"> <div class="submit"> <input type="submit" value="Login"> </div> </form> </div> 

CSS:

 #login_inline { position:absolute; right:10px; top:30px; width:420px; } .submit { display:inline; position:absolute; left:360px; } #UserPassword { position:absolute; left: 185px; } #UserDummyPassword { position:absolute; left:185px; z-index:1; color:gray; } #UserDummyEmail { position:absolute; left:10px; z-index:1; color:gray; } #UserEmail { position:absolute; left:10px; } 

Firefox Submission:

Chrome rendering:

EDIT: Live example (Correct rendering)

Answer 1

An absolute position makes you dependent on the correct width of the input elements. This is difficult to do for a cross browser, as browsers typically use custom or custom elements that do not build sequentially. You are better off using an inline block or a floating layout that handles inconsistent widths.

If you really need to do this, there are some hacks that use the css3 box-sizing property and / or manually adjust properties, such as line size and font size and indentation, to make all browsers agree on the input size, but it's harder than that sounds.

This question has some information about box-sizing and using percent / auto widths to ensure consistency: input with mapping: a block is not a block, why not?

EDIT: based on your comment above, you may need to adjust some div wrappers to set the size / position of both the hidden and visible elements, and then use the percentage width and box-sizing as described.

 <div class="input_wrapper" style="width:100px;position:relative"> <input style="width:100%;box-sizing:border-box;position:absolute"> <div class="fake_input" style="width:100%;position:absolute"> </div> 

The key to this is that box-sizing:border-box less susceptible to browser differences in padding and border calculations when entering forms.

Answer 2

I found that it is usually convenient to put the font size in the input fields, this will make their size (more) consistent