Home/ Questions/Q 8215105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T11:40:36+00:00

I´m trying to achieve a perfect alignment with a submit button next to a

  • 0

I´m trying to achieve a perfect alignment with a submit button next to a text field, each with its own font size. The problem is that I get different results in different browsers, (my site is supporting IE7+ and all modern browsers).

Here´s what I´m working on: http://jsfiddle.net/bxTfn/18/

It seems to be working in Chrome and IE, but the submit button is 1px too short in FF.

Thanks for your help.

CLARIFICATION: I want the text box to have font size 14px and the submit 12px.

UPDATE:
http://jsfiddle.net/bxTfn/24/
This seems to be working in Chrome, FF and IE7 but not in IE8 and IE9 where the submit jumps down 1px.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    box-sizing might be what you’re looking for: http://jsfiddle.net/23CE8/1/

    This worked for me in Chrome and in IE8, however IE8 now mis-aligns the input and the submit button (although they’re the same height). I added vertical-align: middle to both elements (although it could be on their parent container) in order to resolve that.

    If you want IE7 to use box-sizing you’ll need some polyfills, there’s a link to some here from Paul Irish’s blog here: http://paulirish.com/2012/box-sizing-border-box-ftw/ he also explains some of the pros and cons.

    • 0