Strange visibility behavior CSS and jQuery

Question

I have a navigation bar that is fixed position top. Inside it is a mailing list signup field. When hovering over the containing div. jQuery slideDown is invoked revealing more input fields in the previously hidden DIV and then SlideUp is invoked when mousing out. The trouble is that everything behaves in Firefox, but in IE7 the bottom (visible) portion of the div (which is absolutely positioned to bottom in order to keep at the bottom during slideDown and slideUp) is not visible on the initial page load. Oddly, after hovering the (seemingly empty) div, the empty content mysteriously appears and then remains visible even after SlideUp and mouse out are complete. Any ideas anyone (I'm pretty good with CSS but at a loss currently)?

<div id="top_mailing">
  <div id="top_mailing_hidden">
    <div id="drop_container">
      <form method="POST" id="top_email_form" action="xxx">
      <input type="hidden" name="xid" id="xid" value="ccb590470057fda47ff380f48196b203" />
      <input type="hidden" name="type" id="type" value="CustomFormWeb" />
      <input type="hidden" name="name" id="name" value="Ranya.net Top Page Mailing List" />
      <br class="clear" />
      <div id="hidden_inputs">
        <div class="mailing_input">
          First Name*
          <input type='text' name='Contact0FirstName' value=''></div>
        <div class="mailing_input">
          Last Name
          <input type='text' name='Contact0LastName' value=''></div>
        <div class="mailing_input">
          Dance Name
          <input type='text' name='Contact0_RealFirstNameorDanceName' value=''></div>
        <div class="mailing_input">
          City
          <input type='text' name='Contact0City' value=''></div>
        <div class="mailing_input">
          State/Province
          <input type='text' name='Contact0State2' value=''></div>
        <div class="mailing_input">
          Country
          <input type='text' name='Contact0Country' value=''></div>
      </div>
      <div id="checkboxes">
        <input type="checkbox" name="Checkbox0" checked="yes" value="105">&nbsp;NYC Shows
        &amp; Events&nbsp;
        <input type="checkbox" name="Checkbox1" value="107">&nbsp;NYC Weekly Classes&nbsp;
        <input type="checkbox" name="Checkbox2" checked="yes" value="109">&nbsp;NYC Area
        Workshops&nbsp;
        <input type="checkbox" name="Checkbox3" value="111">&nbsp;National &amp; Int'l Workshops
        / Events&nbsp;<br />
        <input type="checkbox" name="Checkbox4" checked="yes" value="115">&nbsp;Ranya DVD
        Updates&nbsp;<br />
        <input type="checkbox" name="Checkbox5" value="117">&nbsp;Long Distance Coaching
        Interest&nbsp;
      </div>
    </div>
  </div>
  <div id="top_mailing_visible">
    <div id="visible_wrap">
      <div id="mailing_label">
        <span>Mailing List</span></div>
      <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';}" />
      <input type="submit" name="Submit" class="signup_btn" id="Submit" value="" />
      </form>
    </div>
  </div>
</div>

Here's the CSS:

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

And here's my jQuery

//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');
    });
});

Answer 1

Seeing your JQuery & HTML for this is probably needed........ but let me throw a guess in the dark: Try setting a fixed height in CSS for your absolute-positioned div and see what happens in IE7.

EDIT:

It's somewhat hard to read the code because of divitis (no doubt you have your reasons) and skewed indentation but I spot one possible cause:

This element's height form#top_mailing is not consistent with the total of the hidden + showing elements inside it (140px + 30px).

Answer 2

For starters, you have more than one element with the same ID. That is not allowed. IDs can not be reused. If you have more than one, you need to use class.

id='#top_mailing'
#top_mailing

should be

class='.top_mailing'
.top_mailing

Fix any other repetitive ids you find, and then try again.

<div id="top_mailing">
<form method="POST" id="top_mailing" action="xxx">
<input id="top_mailing" 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';}" />

Answer 3

This is not necessarily relevant to your question, but you have an invalid CSS selector. On the line that says #top_mailing #top_mailing_hidden span, #top_mailing #top_mailing_hidden input,, you have a trailing comma that could potentially cause the styles for that selector to not work.

Answer 4

The question was answered by patrick over here: http://stackoverflow.com/questions/2232854/form-wrapped-in-two-separate-divs-not-displaying-in-ie7