Ok I’m an idiot with CSS and that is very likely the cause of my problem,
however I still need a solution.
So what I’m trying to do is put a transparent flash movie that takes up all of the browser window ontop of another div. I’ve tried with and without a container div, various combinations of relative and absolute positioning as well various combinations of how I write the div code and none of it has worked, one of the divs ends up being pushed below the other instead of laying ontop.
So I came up with this:
CSS
html, body {
height: 100%;
width: 100%;
background: #599fc4;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center
}
#flash {
postion: absolute;
top: 0px;
width:100%;
height:100%;
z-index:9;
}
#container {
postion: absolute;
top:0px;
width:100%;
height:100%;
padding-top:0%;
margin-top:-60%;
z-index:0;
}
#content {
postion: absolute;
width:620px;
height:100%;
background: #ffffff;
z-index:1;
margin: auto;
}
<div id="flash">
</div>
<div id="container">
<div id="content">
</div>
</div>
Now this seems alright in firefox but in IE it places the content div ontop of the flash div instead of the other way round ignoring any z-index, plus the -60% margin feels like a hack. Any ideas or help would be greatly apreciated.
