Databases
StackOverflow2013
Postsdbo
POcss hover change iframe position and z-index wont work in IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss hover change iframe position and z-index wont work in IE
    text
    copied!<p>I have a feature on my page when I hover over an <code>iframe</code> the css changes the <code>position</code> and <code>z-index</code> so that the <code>iframe</code> gets bigger and moves to the front. However it wont work in IE. It's difficult to get the hover change to trigger (I have to move slowly over the borders of the div) and when it does trigger the enlarged <code>iframe</code> is missing.</p> <p>JSfiddle for this: <a href="http://jsfiddle.net/LWRUd/" rel="nofollow">http://jsfiddle.net/LWRUd/</a> (fiddle works correctly btw)</p> <p><strong>CSS:</strong></p> <pre><code>.server-unit-head{ width: 300px; background-color: #ccccdd; font-size: 8pt; text-align:left; color:blue; /*This causes words to wrap on characters as opposed to white spaces*/ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* css-3 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ word-break: break-all; white-space: normal; } .server-unit{ height: 300px; width: 300px; z-index: 0; position: relative; } .server-unit:hover{ background-color: transparent; z-index: 50; } .server-unit span{ /*CSS for enlarged iframe*/ position: absolute; background-color: #ccccff; padding: 5px; left: -1000px; visibility: hidden; color: black; text-decoration: none; } .server-unit:hover span{ /*CSS for enlarged iframe on hover*/ visibility: visible; top: 1px; left: 1px; /*position where enlarged iframe should offset horizontally */ } </code></pre> <p><strong>HTML :</strong></p> <pre><code>&lt;td class="server-unit-head"&gt; &lt;p&gt;${serverUnit}&lt;/p&gt; &lt;div class="server-unit"&gt; &lt;p&gt;&lt;iframe name="iFrameName" height="297" width="297" scrolling="no" src=" ${serverUnit}"&gt;&lt;p&gt;Your browser does not support iframes.&lt;/p&gt;&lt;/iframe&gt; &lt;span&gt;&lt;iframe name="iFrameName" height="500" width="500" scrolling="yes" src=" ${serverUnit}"&gt;&lt;p&gt;Your browser does not support iframes.&lt;/p&gt;&lt;/iframe&gt;&lt;/span&gt; &lt;/div&gt; &lt;/td&gt; </code></pre>
 

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