Cross browser compatibility issues with HTML form - html

Question

I made an input form that has horrible cross browser compatibility. I used browser specific CSS hacks to fix most of my issues but that got really complicated really fast and I don't want to keep going down that path.
The form is an 800px wide text input (785px width + 5px border + 10px padding) and 100px wide submit button, all inside a 900px wide div keeping them together.
The problem is that the text input width varies by 1px from browser to browser which causes the input button, which is located on the right of the text input, to get pushed down by the extra pixel. I fixed this for most browsers with browser specific hacks by changing the width from 785px to 784px but was wondering if there's something else I'm missing that's causing this.
Here is a JSFiddle.
CSS:
div.formdivholder {
width: 100%;
height: 70px;
padding-top: 20px;
}
div.formdiv {
width: 900px;
height: 70px;
margin: 0 auto;
}
input.text {
z-index: 20;
height: 38px;
width: 785px;
float: left;
padding-left: 10px;
border: solid;
border-width: 5px;
border-color: #3374DC;
border-right: 0px;
background-color: #F0F4FA;;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3);
}
input.submit {
z-index: 1;
height: 50px;
width: 100px;
float: right;
color: #F0F4FA;
font-weight: bold;
background-color: #3374DC;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
border-width: 0px;
}
HTML
<div class="formdivholder">
<div class="formdiv">
<form class="search" role="search" method="get" action="/searchresults.php">
<input type="text" name="input" class="text" placeholder="Search for">
<input type="submit" class="submit" value="Search">
</form>
</div>
</div>

Answer 1

Just use CSS box-sizing property, it is supported by all browsers and IE>=9. You would need to change the following (only):
input.text {
height: 50px;
width: 800px; /* OR even this: width: calc(100% - 100px) */
box-sizing: border-box;
....
}
Take a look in Fiddle.
Definition of the property value border-box:
The width and height properties include the padding and border, but
not the margin. This is the box model used by Internet Explorer when
the document is in Quirks mode. Note: Padding & border will be inside
of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px
solid black;} RESULT {rendered in the browser} .box {width: 350px;}
You can see these days people drop support to IE8, so at the start of CSS they simply put:
*, *:before, *:after {
box-sizing: border-box;
}
(and make their life easier).

Answer 2

try using % instead of pixel, should do the trick, later on you might have to do some responsive so the % will save you time on that one also