Databases
StackOverflow2013
Postsdbo
POAbsolute Positioned DIV within another Absolute positioned DIV does not show on IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAbsolute Positioned DIV within another Absolute positioned DIV does not show on IE
    text
    copied!<p>Please refer to <a href="http://stonepay.sonikastudios.com/css/style.css" rel="nofollow noreferrer">http://stonepay.sonikastudios.com/css/style.css</a> as well as <a href="http://stonepay.sonikastudios.com/" rel="nofollow noreferrer">http://stonepay.sonikastudios.com/</a> for the actual page reference if you like. </p> <p>I have a dropdown menu that shows up on click. This works on the "Our Services" and "Our Projects" menu items, and the fade-in and all works just fine. Being dropdown menus that cannot impede with other layout elements, the div.submenu elements are all set to position:absolute; (and of course, the parent div is set to position:relative; so it's not absolute to the page, but rather, to the menubar itself).</p> <p>The div.submenu_close elements are nested at the end of each div.submenu intsance. It is also set to position:absolute;</p> <p>To summarize, here's my CSS:</p> <pre><code>.submenu { position:absolute; width:auto; padding:0px 10px 0px 10px!important; background-image:url('/images/submenu_bg.jpg'); background-repeat:repeat-x; z-index:99; background-color:#262626; display:none; } .submenu_column { margin-top:10px !important; margin-bottom:10px !important; } .submenu_close { width:11px !important; height:11px !important; background-image:url("/images/submenu_close.png"); background-repeat:no-repeat; position:absolute; bottom:7px; right:7px; z-index:15 !important; border:1px solid #f00; display:block; } </code></pre> <p>And the HTML structure is liek this (simplified to emphasize only structure):</p> <pre><code>&lt;div id="menubar"&gt; &lt;ul id="menu"&gt; &lt;li class="current originalcurrent"&gt;&lt;a href="/"&gt;HOME&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/about-us.php"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/our-services.php" id="services_menu" class="topmenu"&gt;OUR SERVICES&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/our-projects.php" id="projects_menu" class="topmenu"&gt;OUR PROJECTS&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/financing-leasing.php"&gt;FINANCING &amp;amp; LEASING&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/contact-us.php"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="submenu" id="services_submenu"&gt; &lt;div class="grid_3 alpha omega right_dotted submenu_column"&gt; &lt;/div&gt; &lt;div class="grid_3 omega right_dotted submenu_column" style="width:175px;"&gt; &lt;/div&gt; &lt;div class="submenu_close"&gt;&lt;a href="#"&gt;&lt;img src="/images/blank.gif" width="100%" height="100%"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="submenu" id="projects_submenu"&gt; &lt;div class="grid_3 alpha omega right_dotted submenu_column"&gt; &lt;/div&gt; &lt;div class="grid_3 omega right_dotted submenu_column" style="width:175px;"&gt; &lt;/div&gt; &lt;div class="submenu_close"&gt;&lt;a href="#"&gt;&lt;img src="/images/blank.gif" width="100%" height="100%"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>This makes my .submenu_close divs appear just fine on the bottom right corner just fine.. EXCEPT on internet explorer (of course it's IE again). </p> <p>As you can see I have the z-index elements set up just fine. When I change the display mode of the .submenu_close to float:left instead of position:absolute, it shows up just fine, so I know it's not a z-index issue.</p> <p>Any help is greatly appreciated! </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