"Upload File" Appearance issue in IE9...

Mar 30th, 2012 at 01:26 AM
User 439152 Photo

dogboy
Registered User
36 posts

Please see photo attached. When viewing in IE9, there are no borders around the "upload file" elements or the "browse" buttons.
Attachments:
Mar 30th, 2012 at 01:28 AM
User 2073552 Photo

SirAGE
Registered User
1,625 posts

Can we have a link to the page Troy? Or the .fb file?
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
Mar 30th, 2012 at 01:33 AM
User 439152 Photo

dogboy
Registered User
36 posts

Sure.... http://www.localdogrescue.com/surrender.html

Looks fine in Firefox. Yet another reason to *cough* love IE...
Mar 30th, 2012 at 01:38 AM
User 2073552 Photo

SirAGE
Registered User
1,625 posts

You should see it in Chrome... lol

Try adding display: inline; into this ID selector. :P It may help.

#docContainer .fb-button input {
color: #777777;
display: inline;
font-family: Tahoma,Geneva,sans-serif;
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
Mar 30th, 2012 at 02:37 AM
User 439152 Photo

dogboy
Registered User
36 posts

No luck, that didn't work. I can't get the font in IE to appear as Tahoma either despite having changed every instance of it I can find. Does it look worse in Chrome?

*** The curiosity got the best of me so I installed Chrome. That is a little bass-ackwards, isn't it... lol But at least the buttons appear.
Mar 30th, 2012 at 03:52 AM
User 2073552 Photo

SirAGE
Registered User
1,625 posts

To be honest... I like the way it looks in IE better than FireFox and Chrome! I could try and help but I would need the .fb file so I can do the testing live. Instead of trying to guess. lol
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
Mar 30th, 2012 at 10:04 AM
User 439152 Photo

dogboy
Registered User
36 posts

I almost do prefer the IE look also, ideally would like a light border around the buttons and fields like the rest of the elements on the page as opposed to the old clunky looking boxes. I'll be tweaking the css borders and whatnot a little later in the day.

You can get the .fb file @ my domain/ldr-form.zip (if you can let me know when you get it so I can remove from server).

Thanks.
Mar 30th, 2012 at 11:47 AM
User 2073552 Photo

SirAGE
Registered User
1,625 posts

Got it. I will play around with it and see what I can do. :D
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
Mar 30th, 2012 at 01:56 PM
User 2073552 Photo

SirAGE
Registered User
1,625 posts

This fixes the issue... And should have no effect on Firefox...

Line 475 add border rule. :P
#docContainer .fb-button input { color: #777; font-family: Helvetica, Arial, Sans-serif; border:solid 1px;}
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
Mar 30th, 2012 at 04:54 PM
User 439152 Photo

dogboy
Registered User
36 posts

That produces a.... unique look to the boxes in IE9...lol. I used the following css, it produces the look as seen in the attached image. I kind of like the 'Chrome' look..

#docContainer .fb-button input {
color:#777;
border: 1px solid rgb(158, 158, 158);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family: Tahoma, Geneva, sans-serif;
}
Attachments:

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.