::-ms-browse | The ASP.

NET Forums 5/30/17, 5)17 PM

ASP.NET Home Get Started Learn Hosting Downloads Community Forums Help

Home / ASP.NET Forums / General ASP.NET / HTML, CSS and JavaScript / ::-ms-browse

::-ms-browse [Answered]
9 replies
Last post Jan 28, 2014 04:55 AM by ldoodle

::-ms-browse
Jan 25, 2014 09:58 AM | ldoodle

Hey,

Is there anyway to stop this element from inheriting padding from the parent input type=file? I've pretty much cracked (I think) file inputs
across all browsers using only CSS except for IE10/11;

Order is Chrome/Opera, Firefox, IE8/9, IE10/11. You can see the Browse button in IE10/11 has extra padding inside the button, but even I set
it to padding : 0 it doesn't change, because the input[type="file"] padding is - padding: 7px 0 8px 5px;

Re: ::-ms-browse
Jan 25, 2014 10:20 AM | Rion Williams

Firstly, let me preface this by stating that File Upload elements will vary greatly by browser and can be notoriously difficult (and

https://forums.asp.net/t/1963505.aspx?+ms+browse Page 1 of 5
::-ms-browse | The ASP.NET Forums 5/30/17, 5)17 PM

sometimes impossible) to style purely with CSS (http://www.quirksmode.org/dom/inputfile.html) and without resorting to using a
more Javascript-focused approach. Your elements currently look fine in my opinion so I wouldn't focus too heavily or spend an exorbant amount
of time trying to get them to look exactly the same across all browsers.

Do you have the exact markup that you are currently using? It may be a bit easier to tinker with if we had the exact markup and CSS that you
were using.

Re: ::-ms-browse
Jan 25, 2014 10:28 AM | ldoodle

Thanks Rion. Yeah I have seen how hard it is to do without scripting, but I'm so close! :)

If I remove the padding settings from input[type="file"] the top/bottom padding in the button do reduce to nothing, so the problem is the
button is inheriting these settings.

padding : 0 has no effect on the top/bottom padding on the button, but it does have effect on the left/right padding. Weird!

ASPX:

<table style="width : 100%;">

<thead>
<tr>
<th>Add Files</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<asp:FileUpload id="FileUpload_Control" AllowMultiple="True" runat="server" />
<asp:Button id="FileUpload_Button" text="Upload" OnClick="UploadButton_Click"
runat="server" />
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>

CSS:

input[type="file"] {

padding: 7px 0 8px 5px;

-webkit-padding-before : 0;
-webkit-padding-after : 0;
width : 700px;

}
::-ms-value {

background : #fff;
border : 0;
margin : 5px 0 0 0;

https://forums.asp.net/t/1963505.aspx?+ms+browse Page 2 of 5
::-ms-browse | The ASP.NET Forums 5/30/17, 5)17 PM

padding : 0;

}
::-ms-browse {

border : 1px solid #737173;

border-radius : 4px;
font-family : inherit;
margin : 6px 8px 7px 7px;
padding : 0 8px;

}
::-webkit-file-upload-button {

background : #f2f3f8;
border : 1px solid #737173;
border-radius : 4px;
font-family : inherit;
margin : 5px 5px 5px 0;
padding : 2px 8px;

}
input[type="file"], x:-moz-any-link {

padding: 4px 0 4px 4px;

}
input[type="submit"], x:-moz-any-link {

padding: 6px 0 7px 0;

Re: ::-ms-browse
Jan 25, 2014 05:28 PM | ldoodle

Not ideal, but I managed to 'fix' it using an IE8/9 hack;

input[type="file"] {

padding: 0 5px; <- all browsers

padding: 7px 0 8px 5px \0/; <- IE8/9 only
-webkit-padding-before : 0;
-webkit-padding-after : 0;
width : 700px;

I'm not too worried as it's only an intranet app, so I have full control over browsers.

https://forums.asp.net/t/1963505.aspx?+ms+browse Page 3 of 5
::-ms-browse | The ASP.NET Forums 5/30/17, 5)17 PM

EDIT: Not sure what I thought I saw, but it's not fixed by this. IE10 ignores the \0/!

Re: ::-ms-browse
Jan 26, 2014 08:49 AM | Rion Williams

This is kind of what I was referring to earlier regarding them being notoriously difficult to style and is primarily one reason that many people
resort to using a Javascript-based solution that replaces the default File upload input elements.

The most common approach to handling this would be to simply create a "fake" button that acted as the actual browse button and would
essentially click the file input when you clicked on the fake element. This would allow you to easily style the element in a cross-browser way
without tearing your hair out attempting to hack it for each browser.

This might be the easiest approach to take if you really want to handle styling this in a uniform way across all browsers.

Another Consideration

I would recommend using a Reset (http://meyerweb.com/eric/tools/css/reset/) or Normalize (http://nicolasgallagher.com/about-

normalize-css/) stylesheet to help correct and regulate the styling of your site across all browsers. You can find out more on both of these,
what they do, and download them at the following site :

The Most Popular CSS Normalization and Reset Tools (http://www.cssreset.com/)

Re: ::-ms-browse
Jan 27, 2014 08:23 AM | ldoodle

Right, this is really bloody stupid now!

An input type file with height : 33px and an adjacent input type submit also with height 33px renders perfectly in IE (7, 8, 9, 10 and 11). Great!

An input type file with height : 33px and an adjacent input type submit also with height 33px renders the submit button 2 pixels less (1 at the
top and 1 at the bottom) in Chrome, Firefox and Opera.

So two elements. next to each other, with exactly the same height do not render exactly the same height. I'm sorry, but that is a major bug in
my opinion! It is like saying 1 does not equal 1.

If I make the submit button 2 pixels bigger it then breaks it in IE, but fixes it in the other browsers. You'd think with everything moving towards
the web, that everyone used the same standards for rendering. Each can then have their own prefix for things only their browser supports. But
something like form inputs should be rendered the same in every browser.

Re: ::-ms-browse
Jan 27, 2014 10:43 AM | Rion Williams

You would think so right? ;)

Did you try giving either the normalization or reset CSS files a try? They are a great option to place as one of the first CSS files that you load to
help normalize how things look in a cross-browser way, but obviously nothing is perfect and you might be able to still notice a 1-2 pixel bit of
variance between the browsers.

https://forums.asp.net/t/1963505.aspx?+ms+browse Page 4 of 5
::-ms-browse | The ASP.NET Forums 5/30/17, 5)17 PM

Re: ::-ms-browse
Jan 27, 2014 04:17 PM | ldoodle

Yeah I tried the Normalize one which didn't seem to work.

I ended up doing the Javascript method of hiding the real controls and buttons and using the .click method. I made the most of this by using
the .change method of the actual FileUpload control so there's nothing to press to actually upload :)

Re: ::-ms-browse
Jan 27, 2014 04:46 PM | Rion Williams

Javascript is typically the easiest way to deal with all of these quirks as I mentioned earlier. I'm glad you were able to figure out a solution that
seems to work :)

Re: ::-ms-browse
Jan 28, 2014 04:55 AM | ldoodle

What amused me is that if I had the real ASP.NET controls set to display : none, Safari is the only one that would not invoke the File Upload
dialog. I had to put the real controls inside a div and set the div to visibility : hidden and height : 0; then it all worked!!

This site is managed for Microsoft by Neudesic, LLC. | 2017 Microsoft. All rights reserved.

https://forums.asp.net/t/1963505.aspx?+ms+browse Page 5 of 5