Image appearing lower in IE

Question

My button looks fine in all browsers(Firefox, Safari, Chrome) except IE 10 (I tested on two different computers with windows 8.1). The image appears to be a bit lower in IE while other browsers have it right in the middle.

IE:

Firefox:

CSS:

#checkout {
    background-image: url(../img/checkout.jpg);
    border: 1px solid #D6D6D6;
    float: right;
    width: 184px;
    height: 29px;
}

HTML:

<input type='submit' id='checkout' class='jcart-button' value='' />

I have tried using:

line-height: 29px;

Also, I noticed it works fine when I use input type='image' but the problem with that is, I need the ability to have a different image on hover. onMouseClick does the trick but doesn't work without javascript. I need something that works without javascript as well.

Edit:

Removed all my css except the #checkout part but I am still encountering the problem. So I think it is a problem with the #checkout css or the HTML part.

demo: link

Answer 1

That's probably because all browsers have quite different user agent settings for input element.

Those differences are found in margins, padding, border and god knows what else.
Open DevTools (F12) and you can see all the rules involved with the input and input[type="submit"] element.

To be absolutely cross-browser-sure you have to set all those rules manually for #checkout in the CSS.

---

UPDATE:

Could also be that you didn't set the width and height of the button correct.
The way you have it now it's actually not perfectly in the middle. As you can also see in your screenshots, the left/top of the button has a white edge, the right/bottom doesn't.

If I change it to width:186px; and height:31px; , it is perfect.
(With any luck that also fixes your problem in Win8.1/IE10, or at least makes it less obvious)

Answer 2

Found my answer after hours of debugging :)

All I had to do was remove the border from the image and use:

border: none;

I hope that helps others!