Forum Moderators: open
<div style="width:400px;margin:0 auto;border:1px solid black;padding:10px;">
<form>
<input name="name" type="file" style="width:100%;" />
<input name="name" type="text" style="width:100%;" />
</form>
</div> The doctype is HTML 4.01 Transitional (full version), but I actually don't care, if it works with another doctype, that's fine with me (but it doesn't, at least not the ways I tried).
The problem is, that in Firefox (3.0.5) the file input is not 100% in width, but as you can see, the text input works as expected. However, the same code works in both IE7 and Opera 9.6x. Does anyone know how to work around this problem? Is it in any way possible to have the file input as wide as the text input (in Firefox)?
It would even be ok to hard code a value for the width, but not even this works. If a give the file input a width of, say 300px, Firefox does not give the whole element 300px space, but rather the input field of the file upload only, without the button. So if I hard code the width, it works for me, but on another machine with Firefox in another language, the button has another width, so I'm screwed once again.
Is it really possible that it is not possible to make Firefox understand that?!
You can choose any one of those kludges that suits you, but as you'll see, there's nothing very simple and direct. One example is [quirksmode.org...]
If you work with the size attribute for both input elements, you can sometimes come up with acceptable results - but they're not as good as true CSS support for the element "should" give.