Question

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.

My source code is HUGE, but here it is if you like:

<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

Brian, you may see your form as being wrapped in 2 different divs, but really the tags are ultimately mismatched.

Why can’t you just wrap the form around the whole thing by making it the outmost set of tags?

Stripping your HTML down, this is what you have, and it’s not good.

The form is ending with a div, and a div is ending with the form

<div id="top_mailing">
  <div id="top_mailing_hidden">
    <div id="drop_container">
      <form method="POST" id="top_email_form" action="xxx">

      </div>
    </div>
    <div id="top_mailing_visible">
      <div id="visible_wrap">
        <div id="mailing_label">
        </div>
      </form>
    </div>
  </div>
</div>

Why don’t you just do this:

<form>
<div id="top_mailing">
  ...
</div>
</form>