Hello all, I have the following code:

Code:
echo '<tr><td style="text-align:center;width:100%">';
echo '<div id="box1">';

echo '<form style="margin-bottom:1px;margin-top:10px" name="jump2">';
echo '<select name="menu2" style="font: normal 10px sans-serif;text-transform:uppercase;width:140px" onChange="document.location = document.jump2.menu2.options [document.jump2.menu2.selectedIndex].value;" value="GO">';
echo '<option selected value="/">All Brands';
echo '</option>';

while($row = mysql_fetch_array( $fetch )) {
	// Print out the contents of each row into a table
        echo '<option value="'.$_HTTPS['PHP_SELF'].'byBrand.php?ID='.$row['ID'].'&brand='.$row['brand'].'&startrow=0">'; 
	echo $row ['brand'];
	echo '</option>'; 
} 

echo '</select>';
echo '</form>';

echo '</div>'; 
echo '</td></tr>';

echo '<tr><td style="border-bottom: 5px solid #000000;text-align:center;width:100%">';
echo '<div id="box2">';

?>
<form action="/byResults.php" method="get" style="margin-bottom:10px;margin-top:1px">
   <input type="text" onfocus="this.value === this.defaultValue && (this.value = '')" onblur="this.value = this.value || this.defaultValue" name="input" style="font: normal 10px sans-serif;margin-bottom:2px;width:140px" value="KEYWORD SEARCH">
   <input type="hidden" name="startrow" value="0"><br />
   <input name="GO!" type="image" src="/GO.gif" alt="GO!" />
</form>
<?php 

echo '</div>';
echo '</td></tr>';
the css code for box1 & 2 are as follows in a separate css file

Code:
#box1{
background-color: #999999;
color: #ffffff;
width: 100%;
background-color: #ffffff;
text-align: center;
}

#box2{
background-color: #999999;
color: #ffffff;
width: 100%;
background-color: #ffffff;
text-align: center;
}

#box1 a{
font: bold 10px sans-serif;
display: block;
width: 100%;
color: black;
text-decoration: none;
}

#box2 a{
font: bold 10px sans-serif;
display: block;
width: 100%;
color: black;
text-decoration: none;
}

html>body #box1 a{ /*Non IE rule*/
width: auto;
}

#box1 a:hover{
background-color: #000000;
color: #ffffff;
}

html>body #box2 a{ /*Non IE rule*/
width: auto;
}

#box2 a:hover{
background-color: #000000;
color: #ffffff;
}
my query is that when this is displayed in IE both boxes are spaced equally ie. the drop down and the input one. When in firefox/mozilla, the input box is not centrered, the text within the input box is not indented as it should be.

can anyone help me code this correctly to get an even display in both browsers?

many thanks