Question

I am using YUI3’s reset stylesheet and PT Sans from Google webfont.

I have reduced my test case down to this:

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.0pr4/build/cssreset/cssreset-min.css">

<ul>
  <li>
    <input type="submit" value="Create Role" name="submit" id="submit">
 </li>
</ul>

And the styles:

input[type=submit]{
  background: #000000;
  font: 13px 'PT Sans', sans-serif;
  margin-left: 15px;
  padding-bottom: 5px;
  height: 38px;
  color: #FFFFFF;
  border: 0;
  width: auto;
}

I have only tested in IE9, chrome 17 and Firefox 11. In Firefox, the text is in the center of the button, but in Chrome and IE, the text is not in the center.

Fiddle here: http://jsfiddle.net/Gx79V/6/

And an image for comparison:

The buttons look pretty unprofessional in chrome due to this. How can this be fixed?

Answer 1

Solved the issue by using this:

//Remove paddings
input, button{
  padding: 0;
}

//Remove for mozilla
input::-moz-focus-inner {
  border:0;
  padding: 0;
}