Putting a button next to an input, for all browsers - html

Question

I have an input (that holds a number) that I want to put a button next to. This button would, when pressed, increment the value in the box by 1.
I am having a heck of a time lining it up in all browsers though.
I've tried using button, img, and a to accomplish this. img does not line up properly in most of the browsers. Meaning that if I put an input and an img next to each other, the img is a few pixels higher than the input, but that varies by browser. The closest i can get is by making it a button that is styled with css to use my custom image. It works in Chrome, ie7, and ie10. However, in ie8, ie9, and firefox, it is 1 pixel too high, and I can't for the life of me get them to line up.
I read here that floating would make them line up. Sure enough, it did. But now the input and the button are jammed against the edge of the td they're in, and I can't figure out how to move them. Is there perhaps a better method than float? Or just a way to line them up properly?
This is how it is where I am having issues. In Chrome and ie7, ie10 it works fine. It messes up in ie8,9 and firefox.
This is how it looks with floats. It displays right in all the above browsers, but it is now off-center.
Any suggestions?

Answer 1

OK. Here is one way. So I think you might like vertical-align: middle; It only works on inline and inline block elements aligning them to each other. So it's not aligning them inside a box. I made a little sandbox to test your issues HERE. I'm not sure of your constraints, but I use box-sizing: border-box; on most everything these days - So that is something to beware of when looking at the code. I checked it in browser-stack and all seems well for the most part. This is always a difficult task in my experience. I kept to the key points in the CSS below, but there is a bunch of comments and styles and stuff in the codepen. I hope this helps! Good luck!
HTML
<div class="wrapper">
<input class="your-input" type="number" /><button class="your-button">+</button>
</div>
CSS
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
float: left;
height: 4em; /* needs to be defined in this case so that the children know what they should be 100% height of */
/* just for show */
background-color: lightgray;
border: 1px solid red;
padding: .5em;
}
.your-input, .your-button {
display: inline-block;
/* aligned to each other and not the .wrapper */
height: 100%;
/* already was inline by dephault - but just to be clear */
vertical-align: middle;
}
.your-input {
margin: 0;
padding: 0;
width: 20em; /* arbitrary */
text-indent: 1em;
border: 1px solid black;
}
.your-button{
/* whatevers */
background: lightblue;
border: 1px solid black;
border-left: 0;
width: 6em;
border-radius: 0 10px 10px 0;
cursor: pointer;
}

Answer 2

You might want to consider using the bootstrap libraries. See "Prepended and appended inputs" here. They do a great job with browser compatibility. You can further refine the l&f, so that it better matches what you have in your examples.

Answer 3

I came up with a method that fixes my issue, but only for ie8+ which is satisfactory for me.
The structure looks like this:
<input class="add_input" type="text" name="qty" value="0" /><a class="add">
<img src="plus.png"/>
</a>
There cannot be a space or new line between the input and the a or else it will misalign them. The image is simply the "+" by itself, nothing else. Then I use CSS to style the image into the shape I want, with the appropriate :hover and :active selectors.
Here's the CSS:
.add_input{
width:28px;
height:18px;
padding:1px 0;
display:inline-block;
text-align:center;
border:1px solid #0a1c40;
border-right:0;
vertical-align:bottom;
}
.add img{
background:url(add.png);
display:inline-block;
width:18px;
height:20px;
border:1px solid #0b1e45;
border-radius:0px 12px 12px 0px;
vertical-align:bottom;
}
.add img:hover {
background:url(add_hover.png);
}
.add img:active {
background:url(add_active.png);
}
I'm note sure if other vertical-align types would work or not, I just know bottom does.