form alignment

[e1seix]

have a problem with these forms:

 

echo '<tr><td style="background-color:#99ccff;text-align:center;width:100%">';
echo '<div id="box1">';

echo '<form style="background-color:#99ccff;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="background-color:#99ccff;border-bottom: 5px solid #000000;text-align:center;width:100%">';
echo '<div id="box2">';

?>
<form action="/byResults.php" method="get" style="background-color:#99ccff;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 second form with the input tag is aligned further left in mozilla only, than the first which has the option tag.

 

if the following is the css, where am i going wrong?

 

#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;
}

 

can anyone help?

 

cheers!