Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy are my div elements shifting when the container div has overflow: auto set
    primarykey
    data
    text
    <p>Here is an example of the offending code... Note, this code works as expected in FireFox. The problem is in Internet Explorer.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>function init() { $(".listOUT").bind("mouseenter", function(e) { $(this).toggleClass('listOUT', false); $(this).toggleClass('listIN', true); }) .bind("mouseleave", function(e) { $(this).toggleClass('listIN', false); $(this).toggleClass('listOUT', true); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>#container { border: 1px solid black; } .controlContainer { display: inline; position: absolute; height: 25px; border: none; } .listOUT { position: relative; width: 100%; cursor: pointer; margin: 0 0 0 0; height: 85%; border: solid 1px #7F9DB9; padding-right: 20px; /* background:url('images/ddImage_out.gif') no-repeat right center; */ } .listIN { position: relative; width: 100%; cursor: pointer; margin: 0 0 0 0; height: 85%; border: inset 1px #7F9DB9; padding-right: 20px; /* background:url('images/ddImage_in.gif') no-repeat right center; */ } .listTEXT { text-transform: none; width: 100%; position: relative; font-size: 8pt; color: Black; font-family: Verdana; cursor: pointer; border: none; padding-left: 4px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; overflow: hidden; } &lt;/style&gt; &lt;/head&gt; &lt;body onload="init();"&gt; &lt;form id="form1" runat="server"&gt; &lt;div style="width:600px; height:200px;"&gt; &lt;div id="container" style="overflow:auto;position:relative;width:100%; height:100%;"&gt; &lt;div id="control1Container" style="left:67%;top:105px;width:15%;" class=</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; google.load('jquery', '1.3.1'); &lt;/script&gt; &lt;form id="form1" runat="server"&gt; &lt;div style="width:600px; height:200px;"&gt; &lt;div id="container" style="overflow:auto;position:relative;width:100%; height:100%;"&gt; &lt;div id="control1Container" style="left:67%;top:105px;width:15%;" class="controlContainer"&gt; &lt;div id="control1" class="listOUT"&gt; &lt;input type="text" class="listTEXT" id="ddTextBox1" readonly="readonly" value="Digital" name="ddTextBox1" /&gt; &lt;input type="hidden" value="1" id="selSelected1" name="selSelected1" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="control3Container" style="left:50%;top:15px;width:36%;" class="controlContainer"&gt; &lt;div id="control3" class="listOUT"&gt;I am a control&lt;/div&gt; &lt;/div&gt; &lt;div id="control4Container" style="left:40%;top:145px;width:36%;" class="controlContainer"&gt; &lt;div id="control4" class="listOUT"&gt;I am a control&lt;/div&gt; &lt;/div&gt; &lt;div id="control2Container" style="left:47%;top:225px;width:36%;" class="controlContainer"&gt; &lt;div id="control2" class="listOUT"&gt;I am a control&lt;/div&gt; &lt;/div&gt; &lt;!-- more controls here --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt;</code></pre> </div> </div> </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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