Databases
StackOverflow2013
Postsdbo
POIE8 ignores absolute positioning and margin:auto
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE8 ignores absolute positioning and margin:auto
    text
    copied!<p>I have a lightbox-style div with scrolling content that I am trying to restrict to a reasonable size within the viewport. I also want this div to be horizontally centered. This is all easy in Fx/Chrome/IE9.</p> <p>My problem is that IE8 ignores the absolute positioning which I use to size the content, and the rule <code>margin: 0 auto</code> which I use to horizontally center the lightbox.</p> <ol> <li>Why?</li> <li>What are my options for workarounds?</li> </ol> <p><strong>EDIT</strong>: The centering issue is fixed by setting <code>text-align:center</code> on the parent element, but I have no idea why that works since the element I want to center is not inline. Still stuck on the absolute positioning stuff.</p> <p>HTML:</p> <pre><code>&lt;div class="bg"&gt; &lt;div class="a"&gt; &lt;div class="aa"&gt;titlebar&lt;/div&gt; &lt;div class="b"&gt; &lt;!-- many lines of content here --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>body { overflow: hidden; height: 100%; margin: 0; padding: 0; } /* IE8 needs ruleset above */ .bg { background: #333; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; /* needed in IE8 or the bg will only be as tall as the lightbox */ } .a { background: #eee; border: 3px solid #000; height: 80%; max-height: 800px; min-height: 200px; margin: 0 auto; position: relative; width: 80%; min-width: 200px; max-width: 800px; } .aa { background: lightblue; height: 28px; line-height: 28px; text-align: center; } .b { background: coral; overflow: auto; padding: 20px; position: absolute; top: 30px; right: 0; bottom: 0; left: 0; } </code></pre> <p>Here's a demo of the problem: <a href="http://jsbin.com/urikoj/1/edit" rel="nofollow">http://jsbin.com/urikoj/1/edit</a></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