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.
AlexBrand
Updated on April 01, 2020Comments
-
AlexBrand about 4 years
I am having trouble rendering this correctly in firefox. It renders nicely in chrome and in 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 rendering:
Chrome rendering: