Dynamic Selectbox not centering correctly in IE7.

Question

I have a selectbox that is dynamically filled with an Ajax call. The user enters a zip code in a textbox and then the selectbox is filled with cities in that zip code. My problem is that the selectbox starts out empty but centered correctly. Once it is filled dynamically from the Ajax response, IE simply expands the selectbox to the right and doesn't recenter it based on the new width. Firefox and Chrome work fine. I'm using IE7 to test. Here's the code...

    <table width="400" cellspacing="0" cellpadding="2" border="0">
 <tr>
  <td align="center" colspan="2" class="greyheader">Location
  Information</td>
 </tr>
 <tr>
  <td colspan="2" align="center" class="grey"><span class="pagetitle1">&gt;&nbsp;</span>Please
  use only United States, Puerto Rico or Canada zip codes</td>
 </tr>
 <tr bgcolor="#E1E1E1">
  <td width="200" align="center"><b><u>Origin Zip Code</u></b></td>
  <td width="200" align="center"><b><u>Destination Zip Code</u></b></td>
 </tr>
 <tr bgcolor="#E1E1E1">
  <td width="200" align="center">
   <div id="czipS" class="shipperSpecific">
       &nbsp; 
   </div>
   <div class="consigneeSpecific">
   <center>
   <input size="7" type="text" autocomplete="off" maxlength="7"
    name="originZip" id="originZip" onkeypress="return handleEnter(this,event);"/>
   </center>
   </div>
  </td>
  <td  width="200" align="center">
   <div id="czipC" class="consigneeSpecific">
    &nbsp;
   </div>
   <div class="shipperSpecific">
   <center>
   <input size="7" type="text" autocomplete="off" maxlength="7"
    name="destZip" id="destZip" onkeypress="return handleEnter(this,event);" /> 
   </center>
   </div>
  </td>
 </tr>
 <tr bgcolor="#E1E1E1"> 
  <td  width="200" align="center">
   <div class="consigneeSpecific">
   <select id="originCity" name="originCity" />
   </div>
  </td> 
  <td  width="200" align="center">
   <div class="shipperSpecific">
   <select name="destCity" id="destCity" />
   </div>
  </td>
 </tr>
</table>

Answer 1

I could help better if I had seen the ajax code and insertion.

Try re-setting the center-aligning class to the select box after the insertion is done. Often, this triggers IE to calculate things again.

Something like this (jquery):

$('#destCity').removeClass('alignCenter').addClass('alignCenter');