Форма, заключенная в два отдельных DIV, не отображается в IE7 - PullRequest
Новая
       8

Форма, заключенная в два отдельных DIV, не отображается в IE7

0 голосов
/ 10 февраля 2010

У меня есть форма, обернутая в два отдельных элемента div, чтобы скрыть верхнюю часть формы до тех пор, пока при наведении мыши не будет запущена анимация jQuery slideUP, открывающая второй. Несмотря на то, что он немного хакерский, он работает во всех основных браузерах, кроме IE7. Есть ли способ сделать нижнюю часть формы, которая видна в #top_mailing_visible show в IE7. Он отображается во всех других браузерах.

Мой исходный код ОГРОМНЫЙ, но вот, если вам нравится: 

<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>

Вот 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;
}

А вот и мой 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');
    });
});

1 Ответ

2 голосов
/ 10 февраля 2010

Брайан, вы можете увидеть, что ваша форма заключена в 2 разных элемента div, но на самом деле теги в конечном итоге не совпадают.

Почему вы не можете просто обернуть форму вокруг всего этого, сделав ее самым лучшим набором тегов?

Разбор HTML, это то, что у вас есть, и это нехорошо.

Форма заканчивается на div, а div заканчивается на форму 

<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>

Почему бы вам просто не сделать это: 

<form>
<div id="top_mailing">
  ...
</div>
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...