Position an absolute element inside absolute. IE - html

Question

I don't know if this exact question has been asked, if so I am sorry. I can say in my defense that i've checked up about 10 question with a familiar title.
The problem is this:
<div id= "">
<object>
<embed>
<img src="" />
</embed>
</object>
</div>
One of the containers object or embed are positioned absolutely in the body tag. Depending on which browser. For IE 6 7 8 embed is potioned absolutely. For others the object.
Trial and error brought me to this solution and it works very good in all browsers thank god.
Now i am adding a button, which is represented by IMG tag, and i also want to position it absolutely (that is relativly of my movie). In all browsers (except IE 6 7 8 ) this works with the following CSS:
#closeButton
{
position:absolute;
right: 10px;
top: 10px;
z-index:400;
/*background: none;*/
/*display:none;*/
}
Since my object is hidden until some point, the button is also hidden in it/ with it.
Not in IE as you may guess. There, not only the button is visible, but relative of the WINDOW!
Meaning miles away from the movie.
I added a sort of a hack an use JS to hide/show the button the CSS now is:
#closeButton
{
position:absolute;
right: 10px;
bottom:55px;
z-index:400;
background: none;
display:none;
}
And it took the right place and hides and shows with the movie. Guess what BUT, it gets tricky to click it=) Because whenever i put the mouse over the button, movie triggers an event onRollOut and they both dissapear =) hilarious
QUESTION: Why does my button position relative of the window? Or maybe the problem is hiding some place else?
PS I am using relative/absolute positioning to emulate crossbrowser fixed positioning so i can't give it up. But the button's behabiour is unacceptable=) And it will be tricky to place it directly inside the movie, i hope it could be done without it. Although it's an easier way. but more work for every movie.
I'll repeat the problem is IE-only, in all other browser the button behaves.
The whole code
http://pastebin.com/fZvWyVsF
http://pastebin.com/zJBhNeVB
Update:
I tried following advice about positioning the wrapper, with some modification. Now I have this code
<div id="bigBanner">
<OBJECT width="100%" height="90">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="wmode" VALUE="opaque" >
<PARAM name="AllowScriptAccess" VALUE="always" >
<EMBED src="big.swf" width="100%" height="90" wmode="opaque" quality="high" AllowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
<noembed></noembed>
</OBJECT>
<div id="closeButton"><img src="close-box.jpg" onClick = "HideAll();" title="Закрыть"/></div>
</div>
Having those styles:
http://pastebin.com/dCULjHva
It shows the button really well. But again it (button) keeps "running away in IE".

Answer 1

Instead of absolutely positioning the object/embed, place it in a wrapper and absolutely position said wrapper. I'd also place the button in the wrapper so you can position it relatively, but still benefit from the absolute positioning of the outer container.
<div id= "wrapper">
<object>
<embed>
<img src="" />
</embed>
</object>
<div id="button">foo</a>
</div>
#wrapper{position: absolute;}

Answer 2

I believe you have to wrap your movie and button (that are being absolutly positioned) in a div that has position:relative; and a width and height (just to be sure)
<div id= "wrap">
<object>
<embed id="movie">
</embed>
</object>
<img src="" id="closeButton" />
</div>
So the CSS then would be
#wrap
{
position:relative;
width:640px;
height:360px;
}
#movie
{
position:absolute;
width:640px;
height:360px;
z-index:100;
top:0;
left:0;
}
#closeButton
{
position:absolute;
right: 10px;
bottom:55px;
z-index:400;
background: none;
}
Most positioning problems I find to be because I didn't wrap it in something that is positioned:relative. I hope this helps.
DEMO: http://jsfiddle.net/derno/C8FHR/