Try aligning the range and input

Question

I have two buttons, one of which is implemented as an input, the other as a gap. They are placed next to each other:

{ display:inline-block; } 

Buttons are displayed from a custom tag, and the class name is dynamically added to jsp. Css has a specific definition for shadow, for background gradient, for fill, and for font. They use some CSS3, such as border-radius.

But in Firefox, the height of the span button is 18, and the input is 20. Interestingly, their height in IE 8 is 25px, why?

Now I need them to be the same height and horizontally aligned.

Update: Now I have two buttons in jsfiddle. Usage Height: 22px; and vertical-align: top; will not help.

http://jsfiddle.net/gBeCP/

Answer 1

Try setting vertical-align:top in the input tag. I recommend specifically setting the dimensions to px , as this will prevent the browser from applying default values.

Answer 2

The reason is that each browser has its own default styles, so they will change ... just like javascript changes a lot.

Have you ever thought about setting some height on elements that should be the same height?

may be

 span, input[type="button"] { height: 25px; } 

Or, if you like, more specifically.

Answer 3

I think I did it.

The answer on this page means that FF handles the padding differently in input type and input space. Adding CSS to height / width for <input type = 'submit'>

My solution is to set the minimum height of both input and range, and then use vertical-align: middle; so that they are aligned. Finally, play around the pad number so that the text on the buttons is aligned.

Answer 4

The simplest solution is the following two lines (prefix-prefix for the remote version):

 .tranCoreButton { /* I couldn't be bothered to read through the rest of the CSS, or the in-line CSS; seriously: *minimal* reproductive demo, please... */ display: inline-block; box-sizing: border-box; } 

JS Fiddle demo .