CODEWITHSUNDEEP
htmlcssbuttonbrowser
iwazovsky
iwazovsky

Reputation: 1927

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:

    <button>
        some
    </button>

CSS:
    button {
        width:145px;
        height:36px;
        border: 0;
        color:#fff;
    }


How can I prevent this "jumping" of text button?
Also a bonus question: may be someone knows how to prevent this different visions of font-weight in browsers?(see the images)

Opera

firefox

P.S. I googled it - hadn't found the answer

EDIT: FIDDLE

EDIT_2: Browsers are updated to the last versions. (May be excluding the IE, but the issue is in opera too). OS: Windows 8.1 Industry Pro

Upvotes: 3

Views: 1599

Answers (3)

iwazovsky
iwazovsky

Reputation: 1927

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...

Upvotes: 1

bancer
bancer

Reputation: 7525

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, #00a885 49%, #009979 54%);
	background: -o-linear-gradient(top, #00a885 49%, #009979 54%);
	background: -webkit-linear-gradient(top, #00a885 49%, #009979 54%);
	background: -ms-linear-gradient(top, #00a885 49%, #009979 54%);
	margin:0;
	margin-top:14px;

	box-shadow: 1px 1px 4px rgba(0,0,0,0.64);
	text-shadow: 1px 1px 5px rgba(0,0,0,0.74);
	padding: 0;
}
<button>some</button>

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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;

Upvotes: 5

Related Questions