CODEWITHSUNDEEP
htmlcssinternet-explorercss-position
Olga
Olga

Reputation: 1690

Position an absolute element inside absolute. IE

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".

Upvotes: 1

Views: 2660

Answers (2)

quoo
quoo

Reputation: 6307

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;}

Upvotes: 2

derno
derno

Reputation: 35

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/

Upvotes: 0

Related Questions