homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

ASP:FileUpload styling issue

5+ Year Member

Msg#: 4174600 posted 10:17 am on Jul 22, 2010 (gmt 0)

I have a form that I'm trying to style and all the css classes that i've set up work on all the input boxes except for ASP:FileUpload text boxes and buttons. It seems to pick up the styling border properties in IE but not on Firefox and the buttons display differently.

The idea is to get the input to look the same as it does in IE in Firefox. Can anyone help?

In order to see the site please run it in both IE and Firefox to see the difference:

thanks in advance



WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4174600 posted 4:20 pm on Jul 22, 2010 (gmt 0)

I'm not seeing any differences with Firefox 3.6.6

How about a couple code snippets? the CSS rules for the class in question, and HTML for the elements your styling within the form tag.


5+ Year Member

Msg#: 4174600 posted 8:39 am on Jul 23, 2010 (gmt 0)

thanks for looking at this for me:

This is the html:-

<div style="display:inline-block;">
<asp:FileUpload ID="FileUpload1" runat="server" Cssclass="input" style="width:500px;margin-top:3px;" TabIndex="11" /><br /> <asp:CustomValidator ID="ValidFileExts" ControlToValidate="FileUpload1" runat="server" ErrorMessage="Invalid File Extension" ClientValidationFunction="ValidateFileExts" ForeColor="#e79778" OnServerValidate="ValidateFilExts_ServerValidate"></asp:CustomValidator></div>

css class:-

.input {height:18px; background-color:#ffffff; padding:2px 0 0 5px; font-size:12px; color:#313131; border:1px solid #787878;}

I can't actually see a part in the code that allows me to control the browse button with a different class.

I've checked the version of firefox we are running our servers and it's 3.5.11.

I've taken some screenshots to show you what it looks like.

thanks for your help


WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Msg#: 4174600 posted 1:32 pm on Jul 23, 2010 (gmt 0)

Note, that is not the HTML, that is the ASP code. After your page has been displayed, do View > Source and that will show you the actual HTML. You will likely see an <input type="file" ...> in the output.

Styling an input type="file" element has been notoriously problematic. If you do a search for "style file input" you will find more information. Safari, for example, has a totally different model (there is not text box displayed at all). There are some workarounds that require a bit of CSS and JavaScript, but I've never tried it myself, so I will defer to what you can find by searching.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved