У меня есть панель навигации с фиксированной позицией сверху. Внутри это поле регистрации в списке рассылки. При наведении курсора на содержащийся div. jQuery slideDown вызывается, показывая больше полей ввода в ранее скрытом DIV, а затем вызывается SlideUp при отключении мыши. Проблема в том, что все работает в Firefox, но в IE7 нижняя (видимая) часть div (которая абсолютно расположена снизу, чтобы оставаться внизу во время slideDown и slideUp) не видна при начальной загрузке страницы. Как ни странно, после наведения (казалось бы, пустого) div, загадочным образом появляется пустое содержимое, а затем остается видимым даже после завершения SlideUp и mouse out. Любые идеи кто-нибудь (я довольно хорошо с CSS, но в настоящее время в растерянности)?
<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"> NYC Shows
& Events
<input type="checkbox" name="Checkbox1" value="107"> NYC Weekly Classes
<input type="checkbox" name="Checkbox2" checked="yes" value="109"> NYC Area
Workshops
<input type="checkbox" name="Checkbox3" value="111"> National & Int'l Workshops
/ Events <br />
<input type="checkbox" name="Checkbox4" checked="yes" value="115"> Ranya DVD
Updates <br />
<input type="checkbox" name="Checkbox5" value="117"> Long Distance Coaching
Interest
</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');
});
});