[jQuery] Trouble with fadeIn() and IE 7...
Sorry, I am pretty new to jQuery and am sure what I am doing is a
simple "gotcha". Anyways, here is my code...
//jquery
$(document).ready(function() {
$("a#login").click(function() {
$("div.header_login").fadeIn("fast");
});
});
Ok, so I have a <a> element that when clicked, should slide down a
<div> with a login form. Now, this works just as expected in firefox,
but IE is a different story... here is a simple drawing of what it
looks like...
-----------------------------------------------------------------------------------------------------------
*This entire box is my header and within here
is where the <a> link resides
-----------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
|
| <---- when the a link is clicked,
|
| form slides down here, and i want the form
------------------------------------------------------------------------------------------------------------
to retain the original background of the header
Under firefox this is great, but under IE, it removes the background
where that <div> is going to be fading in, and then fades in the new ,
<div>. I would like this to look seamless like it does in firefox...
The css...
div.header {
height:75px;
background-image: url(../img/site_images/header_repeat.gif);
background-repeat: repeat-x;
}
^ This is the main header with the repeating image that goes all the
way across
div.header_login {
float: right;
}
^ This is what fades in
And even when I do this...
div.header_login {
float: right;
height:75px;
background-image: url(../img/site_images/header_repeat.gif);
background-repeat: repeat-x;
}
It still removes the background first and then fades this entire thing
in, looking sloppy.
Any advice is GREATLY appreciated... Thank you!