jQuery click event causing layout problems in IE

I am using a click change event to show and populate 2nd dropdown. This all works fine in IE8 & FF. However, my problem is that IE8 is causing the layout to break when the click event is triggered again. For example, in the attached grabs, you will see a legend with 'Select Company', this is the property that is triggering the click event. If the event is in a hidden position, then a message is displayed which is a div #formMessage with some text. The legend ID is #fld_company. I am confused as to why this should break. I have included jquery code and relevant css and would be grateful if someone could show me where I have gone wrong with. Many thanks.

Complete code: http://开发者_Python百科jsfiddle.net/jfZcv/2/

<div id="formMessage">Click again to open</div>
#formMessage {display:none; margin-top: 8px; color: #999;background: transparent;}


<!--- dropdown for new user addition  -->
<script language="javascript" type="text/javascript">


        $(function() {

                    $("#fld_company").show();
                    $(".data").hide();
                    $("#coname").hide();

                    $("#fld_company").live('click', function() {
                    $("#fld_fld").toggle(1000);
                    $("#formMessage").toggle(1000);
                  });

              $("#AUSR_company").live('change', function() {
              if($(this).val()=="new")
              {
                $(".data").slideDown(1000);
                $("#coname").hide();
                $("#AUSR_name").val("");
              }
            else
            if($(this).val()!="new")

             {

               $("#coname").fadeIn(1500);
               $(".data").hide();

             }


          });
     });

</script>
<!--- end of dropdown for new user addition -->