Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE10 Input extra/inherited padding?

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #161135
    ldoodle
    Participant

    Hey,

    Is there a known ‘problem’. For instance input type text seems to have extra padding/margin at the top so it pushes down in comparison to other browsers, and even IE9 and less.

    Also, the Browse button in input type file also seems to inherit padding from it’s parent, despite setting padding 0 on ::-ms-browse, so it blows up the entire input type file.

    http://i.imgur.com/JbmbYMk.png – Top one is IE10.

    http://i.imgur.com/DQeNw6W.png – Browse button has extra padding top and bottom, because it inherits from the parent input type file. Bottom one is IE10.

    #161136
    magicspon
    Participant

    Hello,

    This might be a line-height issue.

    good luck

    #161138
    Senff
    Participant

    We’d have to see the underlying code — out of the box, I don’t think there’s an issue with input boxes right away.

    See http://codepen.io/senff/full/aHmvL , which looks pretty much the same in Chrome, Firefox, IE10 and IE9.

    #161146
    ldoodle
    Participant
            Add Files
    

    input[type=”file”] {

    padding: 7px 5px; <------ this padding actually puts padding inside the Browse button
    -webkit-padding-before : 0;
    -webkit-padding-after : 0;
    width : 700px;
    

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

    padding: 4px 0 4px 4px;
    

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

    padding: 6px 0 7px 0;
    

    }
    ::-ms-value {

    background-color : #fff;
    border : 0;
    margin : 5px 0 0 0;
    padding : 0;
    

    }
    ::-ms-browse {

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

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

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

    }

    #161172
    Senff
    Participant

    ?

    Please elaborate.

    #161186
    Paulie_D
    Moderator

    Yeah, we need to see a live link or a Codepen reduced case.

    #161187
    ldoodle
    Participant

    Try this: http://jsfiddle.net/mCTUT/17/

    In IE9 and less, Firexfox and Chrome/Opera, it’s spot on. The padding on input[type=”file”] is putting the padding on the actual input and not the value and browse button, whereas in IE10 it is applying the padding to the value and browse button rather than the ‘main’ input.

    Remove the padding from the input[type=”file”] and see what happens in IE10. Make it stupidly big and also see what happens in IE10.

    Putting a top/bottom padding on the ::-ms-browse button itself does not seem to overwrite what it is inheriting.

    #161189
    ldoodle
    Participant

    This is it with the Upload (submit) button next to it: http://jsfiddle.net/mCTUT/21/

    #161193
    ldoodle
    Participant

    And this is it pretty much perfect for IE9 and less, Firefox and Chrome/Opera: http://jsfiddle.net/mCTUT/29/

    IE10 looks terrible!

    #161237
    Senff
    Participant

    OK, I thought you were having issues with a normal text input field.

    I think it’s important to keep in mind that the UPLOAD button is one of the most difficult elements to style (or actually, quite impossible) and that it doesn’t only differ between browsers, it also differs between OS’s. You probably won’t be able to make it look exactly the same on every browser/OS. Even if you try, you’re going to end up with a lot of browser-specific hacks.

    So to answer your original question, “Is there a known ‘problem’“, I would say yes, it is a known problem, but it’s not a bug per say.

    Personally, I try to keep upload fields as standard as possible myself. Saves me a lot of trouble. An alternative is to use some jQuery plugins that will re-style it completely, and that’s where you can make it look all the same cross-browser, cross-OS.

    (Though technically, you don’t style the upload field, but you replace it with some HTML and CSS)

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.