Hidden div does not show properly. Video of problem attached

Hidden div does not show properly. Video of problem attached

Problem is hard to explain, so I'll just show you.  check out this youtube link.  http://www.youtube.com/watch?v=8NY1KI2iVII

You can see that the divs are repositioning themselves.  I have tried removing the effects and the focus() with no success.    It works fine in chrome and firefox but not in IE. After some testing It displays only the top <div> correctly.  in this case its #business, however if I were to rearrange the <div>'s the one nearest the top would work correctly when selected.  Any advice?  I'm using IE8.

Here is the offending code.

  1.      <div class="field">
  2.                 <label  for="location">Location</label>
  3.                 <input id="location" name="location" type="text"/>
  4.             </div>
  5.             <div class="field">
  6.                 <label for="eventdate">Event Date</label>
  7.                 <input id="eventdate" type="text"/>
  8.             </div>
  9.             <div class="field">
  10.                 <label for="meethingtype">Type of Meeting</label>
  11.                 <select id="meetingtype" name="meetingtype">
  12.                     <option value="city_c_meeting">City Council Meeting</option>
  13.                     <option value="mayor">Meeting With Mayor</option>
  14.                     <option value="councilperson">Meeting With Council Person </option>
  15.                     <option value="business">Meeting With Business </option>
  16.                     <option value="othermeeting">Other</option>
  17.                 </select>
  18.             </div>
  19.         
  20.             <div class="field textbox" id="business">
  21.                 <label for="businessname">Business Name</label>
  22.                 <input type="text" id="businessname" size="20">
  23.             </div>
  24.                <div class="field textbox" id="othermeeting">
  25.                 <label for="othermeetingtype">Meeting Type</label>
  26.                 <input type="text" id="othermeetingtype" size="20">
  27.             </div>
  28.             <div class="field textbox" id="councilperson">
  29.                 <label for="councilpersonname">Name</label>
  30.                 <input type="text" id="councilpersonname" size="20">
  31.             </div>
and the javascript

  1.         $j(document).ready(function()
  2.         {
  3.             $j('.field, input, select, label').focus(function(){
  4.             $j(this).parents('.field').addClass("over");
  5.             }).blur(function()
  6.                 {
  7.                     $j(this).parents('.field').removeClass("over");
  8.                 });
  9.                     $j('.textbox').hide();
  10.                     $j('#meetingtype').change(function() {
  11.                     $j('.textbox').hide();
  12.                     $j('#' + $j(this).val()).show("slide",{},1000);
  13.                     $j('#councilpersonname, #businessname, #othermeetingtype').focus();
  14.                                                         });
  15.                   
  16. });