title: Vertical centering working in almost every browser, but not in IE7
body: <p>It's actually two part question regarding my simple page (that will be replaced some day with real content), HTML+CSS boilerplate used there for vertical centering and <strong>IE7</strong>.</p>
  
  <p><a href="http://engitize.net/" rel="nofollow">http://engitize.net/</a></p>
  
  <ol>
  <li><p>Can anyone provide detailed explanation why the page is displayed correctly in non-IE browsers (Chrome, Fx, Opera), almost all semi-recent to recent IEs (IE5.5, IE6, IE8, IE9), but not in IE7?</p>
  
  <p><em>I am especially interested in: it works in IE6, yet it doesn't work in IE7, because... kind of explanation.</em></p></li>
  <li><p>What should be changed to make <code>div#c</code> properly centered vertically in IE7?<br>
  I am using specific height for <code>div#c</code>, but used boilerplate is height-agnostic and fix should preserve this feature.</p>
  
  <p><em>Spoiling other browsers is not an option, unless it's IE5.5 (ok, IE6 too, but only if it is really unavoidable).</em></p>
  
  <p><em>Changing <code>&lt;!DOCTYPE html&gt;</code> and turning IEs into quirks mode is also not accepted (and it's a pretty bad practice for newly developed pages).</em></p></li>
  </ol>
  
  <p>If you don't have IE7 (just as I), you can visit <a href="http://ipinfo.info/netrenderer/" rel="nofollow">http://ipinfo.info/netrenderer/</a> or <a href="http://browserling.com/" rel="nofollow">http://browserling.com/</a>, paste URL there and choose IE7 to see the problem yourself.</p>
  
  <hr>
  
  <p>Because the page will change after accepting some answer, I'm providing snapshot of relevant HTML and CSS parts from it (with logo URL changed to be absolute).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;style type="text/css"&gt;
  html, body { height: 100%; }
  body { background-color: #fff; color: #000; margin: 0px; padding: 0px; }
  div { margin: 0px; padding: 0px; }
  #outer { position: relative; width: 100%; height: 100%; overflow: visible; }
  #outer[id] { display: table; position: static; }
  #middle { position: absolute; top: 50%; width: 100%; text-align: center; } /* for explorer only*/
  #middle[id] { display: table-cell; vertical-align: middle; position: static; }
  #c { position: relative; top: -50%; } /* for explorer only */
  #c { width: 385px; height: 120px; margin-left: auto; margin-right: auto; }
  #c { background-image: url(http://engitize.net/engitize.png); background-repeat: no-repeat; background-position: center top; }
  #c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
  #footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; } 
  #footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
  a { text-decoration: none; color: #006; }
  a:hover { color: #00c; }
  p { margin: 0px; padding: 0px; }
  &lt;/style&gt; 
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="outer"&gt;&lt;div id="middle"&gt;&lt;div id="c"&gt;&lt;div&gt; 
  because history is important!
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 
  &lt;div id="footer"&gt;&lt;div&gt; 
  &lt;p style="float:left;"&gt;&lt;strong&gt;Przemysław Pawełczyk&lt;/strong&gt;'s imprint | Coming in 2012!&lt;/p&gt; 
  &lt;p style="float:right;"&gt;&lt;a href="http://przemoc.net/"&gt;Przemoc's network&lt;/a&gt;&lt;/p&gt; 
  &lt;/div&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>