Button Text Position Differs From Browser

Button text position differs whether it in firefox/chrome or opera/ie. I have a button and text in it. In opera it goes little bit lower than in firefox. HTML:

Solution 1:

You haven't defined the font-size and font-weight, so the different browser is taking button font as it's own. Setting these explicitly solves the problem:

button {
        width:145px;
        height:36px;
        border: 0;
        color:#fff;
        font: 16px normal Arial;/*change as per your requirement*/
    }

---

Update:

I came to the across solution for the key problem with button tag. The default style for button is display: inline-block;.

And the different browsers do have different vertical-aligning (top, middle, ...), thus fixing vertical-align to the button will fix the issue.

So, far for the button css, add this line of code:

vertical-align: middle;

Solution 2:

In Explorer Windows and Opera there turns out to be a difference between font-weight: 600 and font-weight: bold...

http://www.quirksmode.org/css/tests/iewin_fontweight.html

Use font-weight: 700;.

button {
	position: relative;
	width:145px;
	height:36px;
    line-height: 36px;
	border: 0;
	color:#fff;
	font-size:16px;
	font-weight:700;
	border-radius: 10px;
	font-family:"Myriad Pro", "Verdana", sans-serif, serif;
	background: -moz-linear-gradient(top, #00a88549%, #00997954%);
	background: -o-linear-gradient(top, #00a88549%, #00997954%);
	background: -webkit-linear-gradient(top, #00a88549%, #00997954%);
	background: -ms-linear-gradient(top, #00a88549%, #00997954%);
	margin:0;
	margin-top:14px;

	box-shadow: 1px1px4pxrgba(0,0,0,0.64);
	text-shadow: 1px1px5pxrgba(0,0,0,0.74);
	padding: 0;
}

<button>some</button>

Solution 3:

So I found the problem.

I used font-family "Myriad Pro" which was installed with Photoshop. Every browser seems like renders different this font, so after font-family change the problem has gone.

Quite tricky to find but easy solution...