"Upload File" Appearance issue in IE9


Senior Advisor
1,625 posts

I like the Browse button in IE... The position of the button in Chrome and in Firefox, the text field...

Try to make that work... LOL
"An Apple doth not fall far from its tree, yet an orange does."

http://lbwebsites.com - Web-Design & Hosting.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
http://www.sirage.com - Personal Site.
http://www.aveofluv.com - Wedding Site.


Registered User
28 posts

As a test I wrote the following line before the <form></form> tags on the "myForm.html" page created by WFB (not the html page I enter the iframe script on)....

<label for="TEST">Test outside of &lt;form&gt;&lt;/form&gt; tags:<br>
<input type="file" name="TEST" id="TESt">
</label>

It produces a normal looking upload box/button in IE9 (see pic), so something in the forms code or css is causing the irregular look in IE.
Attachments:


Registered User
28 posts

So does anyone know where the styling is located that is affecting the appearance of the upload boxes and buttons???


Senior Advisor
1,625 posts

Troy,

You use FireFox have you downloaded FireBug and Web Deveolper Tool Bar? These are both great assets for Web Developers and Designers. There is an inspect tool that allows you to see the CSS and HTML connected to any element. Download these and take a look. :D
"An Apple doth not fall far from its tree, yet an orange does."

http://lbwebsites.com - Web-Design & Hosting.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
http://www.sirage.com - Personal Site.
http://www.aveofluv.com - Wedding Site.


Registered User
28 posts

Well those are definitely some handy little tools, aren't they? Thanks for that.

Should this be considered a bug in the program? The appearance issue in IE9 occurs with default css in place, no mods on my part. Seems its these lines in the default.css stylesheet causing the problem...

line 249

/*Form Elements. This rule is common to all elements (inputs/selects)*/
#docContainer input[type=text], #docContainer input[type=password],
#docContainer input[type=email], #docContainer input[type=number],
#docContainer input[type=date], #docContainer input[type=url],
#docContainer textarea, #docContainer input[type=file],
#docContainer input[type=tel] {
color: #666;
font: normal 12px Helvetica, Arial, Sans-serif;
border: 1px solid rgb(220,223,231);
border-top-color: rgb(170,173,178);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width:98%;
max-width:100%;
}

and also line 282

#docContainer input[type=file] {
border:none;
}
#docContainer.fb-small input[type=file] {
border:none;
}
#docContainer.fb-large input[type=file] {
border:none;
}


Registered User
17 posts

When looking at my form in Chrome, there is an upload button, but no box. The button opens the browser, but shows the filename in black text next to the button. Unfortunately, I have a dark background. I'm using the transparent template. :(
http://www.prismvision.com.au/Contact_Us/contact_us.html


Senior Advisor
1,625 posts

I would suggest that you change the color of your text inside your fields. Because they are REALLY hard to look at for very long or it hurts my eyes... Maybe a black? Which would show up better on that purple.
"An Apple doth not fall far from its tree, yet an orange does."

http://lbwebsites.com - Web-Design & Hosting.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
http://www.sirage.com - Personal Site.
http://www.aveofluv.com - Wedding Site.


Senior Advisor
1,786 posts

My oh my, what is it about this land of oz...?
- 'Prisms' everywhere, - at every turn...


Registered User
17 posts

SirAGE, do you mean the placeholder text is too light, or the yellow Label text? Black doesn't show up on the purple. If you're just looking at the form on a white background, I agree. It's hard to read. I may have to use a template with a background and darker text. I still can't get Chrome to show the File upload box, just the button.
Per, our business was built up in a markets type venue, and the people who go there like Shiny, hence the prism, and bright colours. (Sorry about the 'u' in colours. That's something else we do) ;) Even most of our web clients are contacts we've made at the markets.


Senior Advisor
1,786 posts

Graham,
Sorry about my irreverent - or irrelevant - comment ;)
I was also thinking about another forum participant here, Prism, "The Guy From OZ".
So I certainly have nothing against prisms, quite the contrary... :)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.