Customizing Select And Input tags, IE version looks awful

Customizing Select And Input tags, IE version looks awful

I'm trying to make a search bar, category select, and search query. I'm
trying to make them look both the same, same size font. But I don't want
the options to look the same size as the select tag
http://jsfiddle.net/gg8RD/
<table>
<tr>
<td>
<div class="searchInput" style="postion:relative">
<select onchange="document.getElementById('category').value =
this.options[this.selectedIndex].text">
<optgroup>
<option>Cat 1</option>
<option>Cat 2</option>
<option>Cat 3</option>
</optgroup>
</select>
<input id="category" style="postion:absolute width:300px"
placeholder="Choose A Cateogry" value="Choose A Category">
</div>
</td>
<td>
<div class="searchInput">
<input type="text" placeholder="Search Query">
</div>
</td>
</tr>
Is what I've come up with and it's around the style and size I want, But
it looks terrible in internet explorer.
Why is this? How can I get them to look the same, and if not: What's my
next path?