input box spacing issue

[e1seix]

Hello all, I have the following 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

 

#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

[TheFilmGod]

just give us the parsed php (the plain html, without php)... Also try to upload this on a server so we can take a look for ourselves.