title: Form wrapped in two separate DIV's not displaying in IE7
body: <p>I have a form wrapped in two separate div's in order to cause the upper portion of the form to be hidden until mouseover triggers a jQuery slideUP animation, revealing the second.  Despite being a bit hack-ish, this works in all major browsers except IE7. Is there a way to make the lower portion of the form which is visible in the #top_mailing_visible show in IE7. It's showing in all other browsers.</p>
  
  <p>My source code is HUGE, but here it is if you like:</p>
  
  <pre><code>&lt;div id="top_mailing"&gt;
    &lt;div id="top_mailing_hidden"&gt;
      &lt;div id="drop_container"&gt;
        &lt;form method="POST" id="top_email_form" action="xxx"&gt;
        &lt;input type="hidden" name="xid" id="xid" value="ccb590470057fda47ff380f48196b203" /&gt;
        &lt;input type="hidden" name="type" id="type" value="CustomFormWeb" /&gt;
        &lt;input type="hidden" name="name" id="name" value="Ranya.net Top Page Mailing List" /&gt;
        &lt;br class="clear" /&gt;
        &lt;div id="hidden_inputs"&gt;
          &lt;div class="mailing_input"&gt;
            First Name*
            &lt;input type='text' name='Contact0FirstName' value=''&gt;&lt;/div&gt;
          &lt;div class="mailing_input"&gt;
            Last Name
            &lt;input type='text' name='Contact0LastName' value=''&gt;&lt;/div&gt;
          &lt;div class="mailing_input"&gt;
            Dance Name
            &lt;input type='text' name='Contact0_RealFirstNameorDanceName' value=''&gt;&lt;/div&gt;
          &lt;div class="mailing_input"&gt;
            City
            &lt;input type='text' name='Contact0City' value=''&gt;&lt;/div&gt;
          &lt;div class="mailing_input"&gt;
            State/Province
            &lt;input type='text' name='Contact0State2' value=''&gt;&lt;/div&gt;
          &lt;div class="mailing_input"&gt;
            Country
            &lt;input type='text' name='Contact0Country' value=''&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="checkboxes"&gt;
          &lt;input type="checkbox" name="Checkbox0" checked="yes" value="105"&gt;&amp;nbsp;NYC Shows
          &amp;amp; Events&amp;nbsp;
          &lt;input type="checkbox" name="Checkbox1" value="107"&gt;&amp;nbsp;NYC Weekly Classes&amp;nbsp;
          &lt;input type="checkbox" name="Checkbox2" checked="yes" value="109"&gt;&amp;nbsp;NYC Area
          Workshops&amp;nbsp;
          &lt;input type="checkbox" name="Checkbox3" value="111"&gt;&amp;nbsp;National &amp;amp; Int'l Workshops
          / Events&amp;nbsp;&lt;br /&gt;
          &lt;input type="checkbox" name="Checkbox4" checked="yes" value="115"&gt;&amp;nbsp;Ranya DVD
          Updates&amp;nbsp;&lt;br /&gt;
          &lt;input type="checkbox" name="Checkbox5" value="117"&gt;&amp;nbsp;Long Distance Coaching
          Interest&amp;nbsp;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="top_mailing_visible"&gt;
      &lt;div id="visible_wrap"&gt;
        &lt;div id="mailing_label"&gt;
          &lt;span&gt;Mailing List&lt;/span&gt;&lt;/div&gt;
        &lt;input id="top_email" type="text" value="Your E-mail Address" name="Contact0Email"
          onclick="this.value='';" onfocus="if (this.value == 'Your E-mai Address') {this.value = '';}"
          onblur="if (this.value == '') {this.value = 'Your E-mail Address';}" /&gt;
        &lt;input type="submit" name="Submit" class="signup_btn" id="Submit" value="" /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>#top_nav div#top_mailing
  {
      float: right;
      width: 351px;
      padding: 0 10px 46px 5px;
      background: url(images/top_mailing_bg.png) bottom center no-repeat;
      position: absolute;
      top: 0;
      right: 0;
      color: #fff; 
      text-shadow:0 -1px 0px #222;
  }
  #top_mailing #top_mailing_hidden
  {
      font-size: .7em;
      text-align: center;
      position: relative;
      height: 140px; 
      zoom: 1;
      padding: 10px 0 0 0;
      margin: 0 0 0;
      display: none;
  }
  form#top_email_form
  {
      width: 350px;
      height: 135px;
  }
  #top_mailing div#checkboxes
  {
      width: 135px;
      float: left;
      padding: 7px 0 0 0;
  }
  #top_mailing div#hidden_inputs
  {
      width: 205px;
      height: 128px;
      text-align: left;
      float: right;
      background: url(images/hidden_inputs_bg.jpg) top left no-repeat;
      padding: 3px 4px 3px 6px;
  }
  #top_mailing div.mailing_input
  {
      width: 205px;
      height: 14px;
      display: block;
      clear: both;
  }
  #top_mailing div.mailing_input input
  {
      float: right;
      height: 14px;
  }
  #top_mailing #top_mailing_hidden span, #top_mailing #top_mailing_hidden input,
  {
      float: right;
  }
  #top_mailing #top_mailing_hidden a
  {
      color: #acffc0;
      font-weight: bold;
  }
  #top_mailing #top_mailing_hidden a:hover
  {
      text-decoration: none;
  }
  #top_mailing #top_mailing_visible
  {
      height: 30px;
      font-weight: bold;
      font-size: .9em;
      padding: 5px 0 10px 5px;
      position: absolute;
      bottom: 0;
      left: 0;
  }
  #top_mailing input#top_email
  {
      color: #8c8d8d;
      background: url(images/top_mailing_field_bg.jpg) no-repeat;
      width: 163px;
      height: 28px;
      padding: 4px 7px 2px;
      border: 0 none;
      float: left;
      font-size: 1.1em;
      font-weight: bold;
      text-align: center;
  }
  #top_mailing div#mailing_label
  {
      width: 82px;
      padding: 5px 0 0 5px;
      line-height: 1em;
      float: left;
  }
  #top_mailing form
  {
      display: block;
      width: 350px;
      float: right;
  }
  input.signup_btn
  {
      background: url(images/signup_btn.png) no-repeat;
      width: 83px;
      height: 30px;
      border: 0 none;
      cursor: pointer;
      float: left;
      margin-left: 3px;
  }
  input.signup_btn:hover
  {
      background-position: 0 -31px;
  }
  </code></pre>
  
  <p>And here's my jQuery</p>
  
  <pre><code>//Top Mailing List Drop down animation
  $(document).ready(function () {       
      if (jQuery.browser.msie === true) {
          jQuery('#top_mailing')
              .bind(
                  "mouseenter",
                  function(){
                      $("#top_mailing_hidden").stop().slideDown('slow');
                  }).bind("mouseleave",function(){
                      $("#top_mailing_hidden").stop().slideUp('slow');
                  });
      }
  
  
  $('#top_mailing').hoverIntent(
      function () {
          $("#top_mailing_hidden").stop().slideDown('slow');
      }, 
      function () {
          $("#top_mailing_hidden").stop().slideUp('slow');
      });
  });
  </code></pre>