I have used the following code to create a rotating background, i have split up the jquery and the rest of the code for the perpose of this post.
The content area of the page is supposed to be displayed in the center of the screen,
but in IE 9 it displays in left side of the screen
all non IE browsers work fine.
the background class divs are obviously the background layers. they have a height and width of 100% and their background will later be set to the image i want them to display as the background.
the holder div has a higher z index than the background class divs so it is always on top and has a heigth and width of 100%
the outercontent div is supposed to be the main content holder, its width is set to 920px and its left and right margins are set to auto.
the effect of centering is created by having the holder div set to the full width of the window and placeing the outercontent div inside it with the left and right margins set to auto
this works with all other browsers and would usually work with IE
so what is the problem here?
code bellow
JQUERY
<script>
$(document).ready(function() {
$.repeat()
.wait(2000)
.$("#one").animate(
{ opacity: '0' }, { duration: 2000 })
.$("#two").animate(
{ opacity: '1' }, { duration: 2000 })
.wait(2000)
.$("#two").animate(
{ opacity: '0' }, { duration: 2000 })
.$("#three").animate(
{ opacity: '1' }, { duration: 2000 })
.wait(2000)
.$("#three").animate(
{ opacity: '0' }, { duration: 2000 })
.$("#four").animate(
{ opacity: '1' }, { duration: 2000 })
.wait(2000)
.$("#four").animate(
{ opacity: '0' }, { duration: 2000 })
.$("#five").animate(
{ opacity: '1' }, { duration: 2000 })
.wait(2000)
.$("#five").animate(
{ opacity: '0' }, { duration: 2000 })
.$("#six").animate(
{ opacity: '1' }, { duration: 2000 })
.wait(5000)
.$("#six").animate(
{ opacity: '0' }, { duration: 2000 })
.$("#one").animate(
{ opacity: '1' }, { duration: 2000 });
});
</script>
HTML
<body>
<div id="one" class="background"></div>
<div id="two" class="background"></div>
<div id="three" class="background"></div>
<div id="four" class="background"></div>
<div id="five" class="background"></div>
<div id="six" class="background"></div>
<div id="holder">
<div id="outercontent">
<div id="bleft" class="border"></div>
<div id="innercontent">
</div>
<div id="bright" class="border"></div>
</div>
</div>
</body>
CSS
#holder{
background-color:transparent;
width:100%;
height:100%;
position:absolute;
z-index:1;
}
#outercontent{
height:100%;
width:920px;
margin-left:auto;
margin-right:auto;
background-color:transparent;
}
.border{
width:10px;
height:100%;
background-color:transparent;
float:left;
}
#bleft{
background-image:url(images/fade-left.png);
background-repeat:repeat-y;
}
#bright{
background-image:url(images/fade-right.png);
background-repeat:repeat-y;
}
#innercontent{
width:900px;
height:100%;
background-color:#FFF;
float:left;
}
/* Background script's */
body{
padding:0px;
margin:0px;
}
.background{
height:100%;
width:100%;
opacity:0;
position:absolute;
z-index:0;
background-position:center;
}
#one{
background-color:#000;
opacity:1;
background-image:url(../images/assortedbreads.png);
}
#two{
background-color:#0F0;
}
#three{
background-color:#639;
}
#four{
background-color:#F00;
}
#five{
background-color:#fff;
}
#six{
background-color:#FF0;
}