Databases
StackOverflow2013
Postsdbo
POPosition an absolute element inside absolute. IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPosition an absolute element inside absolute. IE
    text
    copied!<p>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.</p> <p>The problem is this:</p> <pre><code>&lt;div id= ""&gt; &lt;object&gt; &lt;embed&gt; &lt;img src="" /&gt; &lt;/embed&gt; &lt;/object&gt; &lt;/div&gt; </code></pre> <p>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.</p> <p>Trial and error brought me to this solution and it works very good in all browsers thank god. </p> <p>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:</p> <pre><code>#closeButton { position:absolute; right: 10px; top: 10px; z-index:400; /*background: none;*/ /*display:none;*/ } </code></pre> <p>Since my object is hidden until some point, the button is also hidden in it/ with it.</p> <p>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.</p> <p>I added a sort of a hack an use JS to hide/show the button the CSS now is:</p> <pre><code>#closeButton { position:absolute; right: 10px; bottom:55px; z-index:400; background: none; display:none; } </code></pre> <p>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</p> <p>QUESTION: Why does my button position relative of the window? Or maybe the problem is hiding some place else?</p> <p>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.</p> <p>I'll repeat the problem is IE-only, in all other browser the button behaves.</p> <p>The whole code</p> <p><a href="http://pastebin.com/fZvWyVsF" rel="nofollow">http://pastebin.com/fZvWyVsF</a></p> <p><a href="http://pastebin.com/zJBhNeVB" rel="nofollow">http://pastebin.com/zJBhNeVB</a></p> <p>Update:</p> <p>I tried following advice about positioning the wrapper, with some modification. Now I have this code</p> <pre><code>&lt;div id="bigBanner"&gt; &lt;OBJECT width="100%" height="90"&gt; &lt;PARAM NAME="quality" VALUE="high"&gt; &lt;PARAM NAME="wmode" VALUE="opaque" &gt; &lt;PARAM name="AllowScriptAccess" VALUE="always" &gt; &lt;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"&gt; &lt;/EMBED&gt; &lt;noembed&gt;&lt;/noembed&gt; &lt;/OBJECT&gt; &lt;div id="closeButton"&gt;&lt;img src="close-box.jpg" onClick = "HideAll();" title="Закрыть"/&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Having those styles:</p> <p><a href="http://pastebin.com/dCULjHva" rel="nofollow">http://pastebin.com/dCULjHva</a></p> <p>It shows the button really well. But again it (button) keeps "running away in IE". </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload