firefox absolute positioning problem

By positioning absolute you become dependent on correct width of the input elements. This is difficult to do cross-browser because browsers tend to use custom or native elements that don't style consistently. You're better off with an inline-block or floated layout that handles inconsistent width.

If you really have to do it that way there are some hacks using css3 box-sizing property and/or manually tuning properties like line-height and font size and padding to get all browsers to agree on input sizing but that's harder than it sounds.

This question has some info on box-sizing and using percentage/auto width to get consistency: input with display:block is not a block, why not?

EDIT: Based on your comment above you may need to set up some div wrappers to set the size/position of both the hidden and visible elements and then use percentage widths and box-sizing as explained.

<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 it all is that box-sizing:border-box is less susceptible to browser differences in padding and border calculations on form inputs.

I found it that usually it is good to put a font-size on input fields, this will make the size of them (more) consistent