CODEWITHSUNDEEP
htmlcssbutton
Jonnerz
Jonnerz

Reputation: 1161

Button text not vertically aligning in IE 10

I have a button with text, the text doesn't seem to align align vertically within the button. This only happens on IE 10. Chrome is perfect.

HTML

<input type="text" id="postcode" name="Postcode" class="input" placeholder="enter your postcode..." maxlength="8" size="10"><button class="button" type="submit" id="postcode">FIND DEALS</button>

CSS

.banner-input button{
    background: #0072bc;
    font-family: "Myriad Pro", 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    width: 108px;
    height: 54px;
    margin: 0 0 0 10px;
    border: 1px solid #00548a;
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 0px,#2888c7 0px 1px 0px inset;
    -moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 0px,#2888c7 0px 1px 0px inset;
    box-shadow: rgba(0,0,0,0.5) 0px 1px 0px,#2888c7 0px 1px 0px inset;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #005f9c;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0072BC', endColorstr='#FF005F9C');
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f7b814), color-stop(100%, #ff9100));
    background-image: -webkit-linear-gradient(top, #0072bc 0%, #005f9c 100%);
    background-image: -moz-linear-gradient(top, #0072bc 0%, #005f9c 100%);
    background-image: -o-linear-gradient(top, #0072bc 0%, #005f9c 100%);
    background-image: linear-gradient(top, #0072bc 0%, #005f9c 100%);
    color: #fff;
    line-height: 40px;
    vertical-align: middle;
}

I have tried various line-height's and paddings. Nothing seems to work. :(

Upvotes: 3

Views: 3735

Answers (4)

user5905021
user5905021

Reputation:

In case where you can't change the font (specific to the client's design) you can put a detectizr to detect the version of the Browser, the operation system and even the kind of device. After that, you can target directly that element. Here is an example in Sass for your button. 

.ie { .btn-something { padding-top: 15px; } }

Upvotes: 0

Jonnerz
Jonnerz

Reputation: 1161

I have solved it. It was the font I was using.

Myriad Pro appears quite a bit different on IE compared too Chrome and Firefox. I changed it to Open Sans and now the text is aligned correctly on all three.

Upvotes: 2

Steve
Steve

Reputation: 43

Where are you setting the padding for your button? I don't see that in your css.

Your line-height seems too high. If your height is 50px and your padding is 10px (top and bottom) then yor line-height should be 30 and so on

Upvotes: 0

Mary Turkina
Mary Turkina

Reputation: 728

Try to set line-height = height --> line-height: 54px;

Upvotes: 2

Related Questions