CSS Relative Positioning+Browser Compatibility - css

Question

I'm trying to position a searchbox and submit button so that they are line up. I've used a CSS reset to have all browsers starting from the same level. For whatever reason, I can't get them to line up on the IE, Chrome and Firefox. I can get it working on 1/3 but not 3/3. With the current code, the search button is aligned in FF, 1px lower in IE, and 3-5px lower in Chrome. Any help is much appreciate as I am at my wits end.
Here's the code.
HTML snippet:
<span class="search">
<form id="searchbox" action="/search" method="get">
<input name="query" id="search" type="text" placeholder="I'm looking for..."/>
<input id="submit" class="mglass" type="submit" value=""/>
</form>
</span>
CSS snippet:
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
#search{
position: relative;
bottom: 1px;
height: 27px;
width: 200px;
font-size: 14px;
font-family: 'calibri', Tahoma, Geneva, sans-serif;
border: none;
background-color: #eee;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
padding-left: 10px;
}
#searchbox{
position: relative;
right: 27px;
top: 5px;
float: right;
}
input[type="submit"]::-moz-focus-inner {
border: 0;
padding: 0;
}
input[type="text"]::-moz-focus-inner {
border: 0;
padding: 0;
}
.mglass{
background: url(../images/search_glass01.png) no-repeat center;
height: 29px;
width: 33px;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
position: relative;
right: 7px;
bottom: 0px;
}
.mglass:hover{
background: url(../images/search_glass02.png) no-repeat center;
}

Answer 1

I had to hack up your CSS a bit and simplified some of the selectors to get my head around it, but, give this a try:
http://jsfiddle.net/R56mu/
body {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
#searchbox{
float: right;
overflow:hidden;
}
#search{
width: 200px;
height:32px;
float:left;
padding: 0 0 0 10px;
background-color: #eee;
font-size: 14px;
font-family: 'calibri', Tahoma, Geneva, sans-serif;
border: none;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
}
#submit{
width: 33px;
height:34px;
float:left;
background: url(../images/search_glass01.png) no-repeat center;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
}
#submit:hover{
background: url(../images/search_glass02.png) no-repeat center;
}
input[type="submit"]::-moz-focus-inner {
border: 0;
padding: 0;
}
input[type="text"]::-moz-focus-inner {
border: 0;
padding: 0;
}