Why are parts of parent elements sliding with animate()? IE
I'm having a bit of an issue with IE.
For some reason on this page:
http://www.rooxilist.com/bbnlev/innovation.html
When the right panel #content slides in, the background of the parent div #bgfield also slides in with it... Pardon my french, but WTF? I can't find anything linking the two. Is this some new weird "HasLayout" issue? Only a problem in flavors of IE. Halpplz!
The line of code for the slide looks like this:
-
$("#content").css({'margin-right' : '-651px' }).animate( { marginRight: "0px" }, 1200 );
The associated CSS looks like
/* Styles for Div holding the bg image */
-
#bgfield {
position: relative;
width: 900px;
height: 448px;
border: solid 10px #FFFFFF;
/* background-image: url(images/transparent.gif); -- set this in each page */
background-position: center top;
background-repeat: no-repeat;
background-attachment: scroll;
text-align: center;
padding-top: 112px;
overflow: hidden;
}
/* Styles for main Content */
#bgfield #content {
float: right;
position: relative;
background-attachment: scroll;
background-image: url(../images/rightbg87pc.png);
background-position: right top;
background-repeat: no-repeat;
overflow: hidden;
height: 275px;
width: 651px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
margin-right: 0px;
}