Getting Firefox to stretch an input properly - css

Question

This is a simplified version of something I'm trying to do. Works in every browser other than FF:
http://jsfiddle.net/hDFnW/10/
Basically, I'm trying to get an input to apply width:auto; when position:absolute;left:200px;right:0px is set.
It works on anything other than an input... I'm rather confused right now.
How can I accomplish this in Firefox, or better yet, across all browsers?

Answer 1

You can wrap the input with a div and then it works.
CSS
div {
display : block;
position : absolute;
left : 100px;
right : 0px;
top : 3px;
}
input {
width : 100%;
border : 1px solid #000;
background : #FFF;
}
jsFiddle using other examples.
jsFiddle all working.
Example
You can get a similar effect (albeit not the same however) using floats.

Answer 2

Very simple fix...no wrapping required. IE, Chrome, FF - all good.
http://jsfiddle.net/LGn9A/1/
don't mix the pixels w/ percentages :-) (in this case)
ul {
width : 95%; /* here */
font : 12px/1.4 tahoma; /* global aethetics */
....
}
li { ... }
input, span {
display : block;
position : absolute;
left : 20%; /* here */
right : 0px;
width : 80%; /* and here */
}
FF-- will cooperate using white-space:nowrap; works in IE, and Chrome as well.
<li>Title
<span style="border:0px">
<input style="width:100%;left:0px;white-space:nowrap;">
</span>
</li>
http://jsfiddle.net/hDFnW/16/

Answer 3

I came up with two solutions:
http://jsfiddle.net/w6fGY/ - fixed width for <span> and <input>
http://jsfiddle.net/B4MKu/ - all <input>s wrapped in <span> and width:100%.
I hope it's of use.

Answer 4

A simple solution to this problem is to use position:relative on input and assign its left position and width value using percentage and not px. That's because parent ul width is specified in percentage and not px. Otherwise the solution would be easy if a fixed width was given to the ul element
<ul>
<li>Title<input></li>
<li>Title<input></li>
</ul>
ul {
width : 95%;
border : 1px solid #000;
font-family : tahoma;
padding : 5px;
position:relative;
}
li {
background-color : #EEE;
margin : 2px;
padding : 3px;
}
input {
position:relative;
left:20%;
width:75%; /* I used 75% to give an extra 5% room for paddings and margins specified by parent elements ex: li ul) */
}
Check working example at http://jsfiddle.net/t5CvC/1/

Answer 5

It seems -moz-calc would work, but only in FF4.
As you said you don't want wrapper spans or divs.
There's a slightly hacky way in this jsfiddle
Summary:
Change the box-sizing model to contain borders and padding, then add the 100px as left padding so the input text value moves over but the width stays at 100%; - then clip the input to chop off the extra left bit and show the title text again. Only problem is, there's no left border, I tried to add a fake one with a pseudo element.. needless to say the fake border doesn't work in IE8 and none of it works in IE7
Update
updated code to use a background image which now gives a border effect in IE too ==> jsfiddle