FileUpload control not rending properly in Firefox

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

Has anyone found a way to ensure that the file upload control renders the
same in IE 7 and Firefox 2. In particular the width attribute.

This renders ok in IE7 but not in Firefox 2.0 (width set to 600px):

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb"
Inherits="AJAXEnabledWebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" Width="600px" /></div>
</form>
</body>
</html>

I've tried using CSS to set the width of the control but the same result!

I've googled but the only thing i can find are references to asp 1.1 and
"browserCaps" which is of no use.

I'm using VS2005 VB.net & ASP.net 2.0

Any ideas?
 
Both identical:

Firefox =

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1"
enctype="multipart/form-data">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJLTcwNzkzOTQzD2QWAgIDDxYCHgdlbmN0eXBlBRNtdWx0aXBhcnQvZm9ybS1kYXRhZGQTiLHSoItd/ZcHLHDCAbxIdLMhWQ==" />
</div>

<div>
<input type="file" name="FileUpload1" id="FileUpload1"
style="width:600px;" /></div>

</form>
</body>
</html>

IE7=

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1"
enctype="multipart/form-data">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJLTcwNzkzOTQzD2QWAgIDDxYCHgdlbmN0eXBlBRNtdWx0aXBhcnQvZm9ybS1kYXRhZGQTiLHSoItd/ZcHLHDCAbxIdLMhWQ==" />
</div>

<div>
<input type="file" name="FileUpload1" id="FileUpload1"
style="width:600px;" /></div>
</form>
</body>
</html>
 
Both identical:
Click to expand...

Wow! That's really strange - toggle between FireFox rendering and IE
rendering really is totally different.

If you want to see something even weirder, have a look at this in FireFox in
IE mode:

<div>
<input type="file" name="FileUpload1" id="FileUpload1"
style="width:100px;" />
<input type="text" name="txtText" id="txtTest" style="width:600px;" />
</div>

Now switch to FireFox mode...

Seems that Mozilla are adamant that this is the way it's supposed to be, and
that the file control *shouldn't* be resizeable with styles...

Nil desperandum...

http://www.quirksmode.org/dom/inputfile.html
http://www.google.co.uk/search?hl=e...GB220&q=FireFox+input+type="file"+width&meta=
 
Strange!

But there must be a way to set the width of FileUpload control in Firefox.

I can't believe that a browser that is used by millions won't render such a
widespread control. Whats going on?

Is this a bug with firefox or asp.net? Is there a work around??
 
Sorry I didn't check out your links! Looks like a work around - thanks.

But why o why is such a simple thing so convoluted!!

Cheers
James
 
Sorry I didn't check out your links! Looks like a work around - thanks.

But why o why is such a simple thing so convoluted!!
Click to expand...

<shrugs>

It's known in the trade as double-O double-T (= one of those things)
 
Back
Top