Welcome to WebmasterWorld Guest from 54.162.240.235

Forum Moderators: incrediBILL

Message Too Old, No Replies

ASP:FileUpload styling issue

     
10:17 am on Jul 22, 2010 (gmt 0)

5+ Year Member



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
4:20 pm on Jul 22, 2010 (gmt 0)

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



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.
8:39 am on Jul 23, 2010 (gmt 0)

5+ Year Member



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
1:32 pm on Jul 23, 2010 (gmt 0)

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



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month