CODEWITHSUNDEEP
css
Nick
Nick

Reputation: 3965

Button is smaller than text input in Chrome?

I'm trying to align a submit button (input type="submit") with a text input (input type="text") but in Chrome the submit button is always slightly smaller.

Here's the HTML:

<input type="email" placeholder="Secret Sale &hearts; Enter your email" name="MERGE0" class="email" size="22" value="">
<input type="submit" class="button" name="submit" value="Join">

And here's the CSS:

#header-top .newsletter .email, #header-top .newsletter .button { font-size: 12px; line-height: normal; box-sizing: border-box; padding: 5px; }

As you can see I've tried setting the padding and line-height to be the same for both elements, and after reading around on Stackoverflow I've seen references to setting the box-sizing too which unfortunately hasn't made any difference.

Here it is in IE (fine):

Internet Explorer 10

And in Firefox (also fine):

Firefox

And finally in Chrome (button too small, or text input too big?):

Chrome

Here's the live site if it helps too: http://www.arabel.co.uk/about-arabel/faqs

Any help with this would be much appreciated, I'm completely stumped as to why it's bigger in Chrome. Thanks!

Upvotes: 0

Views: 731

Answers (2)

nikjohn
nikjohn

Reputation: 21852

Chrome is adding a default 2px border to your textbox due to some reason. Your text box and button both have the same padding, but the text box has a 2px border and the button has a 1px border. A quick fix would be to add an individual padding of 5px to ".email".. everything looks a okay. If you change it in the common css line, then both items will get the padding, and they will still be skewed.

#header-top .newsletter .email{
padding: 4px;
}

And make sure you add this after the line that defines the css for both .email and .button, so that this will overwrite the 5px padding.

Alternatively, you can also do away with that combined css altogether and add individual padding or 4px for .email and 5px for .button

Upvotes: 1

Tony
Tony

Reputation: 1307

Likely hasn't something to do with browser default styles.

You could try including a reset.css in your page. http://meyerweb.com/eric/tools/css/reset/

It could have unattended effects else where though.

Upvotes: 1

Related Questions