ASP:FileUpload styling issue

[LouiseMarie]

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:
www.a2directory.com/contact.aspx

thanks in advance

[tedster]

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.

[LouiseMarie]

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.
[rapidshare.com...]

thanks for your help

[Fotiman]

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.