title: IE8 and IE7 CSS issue with div and positioning
body: <p>I need help figuring out why my div class="content" is not showing up right in IE7 &amp; IE8 - looks great in IE9:    <a href="http://kathykroening.com/" rel="nofollow">http://kathykroening.com/</a>   </p>
  
  <p>The content should have a dark background overlay but it doesn't seem to be coming through and the positioning isn't right either as the caption appears on the top it should be below.</p>
  
  <p>Here is the HTML:  </p>
  
  <pre><code>    &lt;body class="home page page-id-81 page-template-default"&gt;
  
      &lt;div id="wrapper"&gt;
  
          &lt;header&gt;
              &lt;div class="toph"&gt;
                  &lt;h1 class="logo"&gt;&lt;a href="http://kathykroening.com"&gt;Kathy Kroening&lt;/a&gt;&lt;/h1&gt;&lt;!-- /.logo --&gt;
              &lt;/div&gt;
              &lt;div class="bottomh"&gt;
                  &lt;nav class="main"&gt;
  &lt;ul class="inner"&gt;&lt;li id="menu-item-194" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-81 current_page_item menu-item-194"&gt;&lt;a href="http://kathykroening.com/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151"&gt;&lt;a href="http://kathykroening.com/about-kathy/"&gt;About Kathy&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-152"&gt;&lt;a href="http://kathykroening.com/experience/"&gt;Experience&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-153" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-153"&gt;&lt;a href="http://kathykroening.com/ideas/"&gt;Ideas&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156"&gt;&lt;a href="http://kathykroening.com/open-house/"&gt;Open House&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-155"&gt;&lt;a href="http://kathykroening.com/cabinetry/"&gt;Cabinetry&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
                  &lt;/nav&gt;&lt;!-- /.main --&gt;
                  &lt;nav class="crumbs"&gt;
                  &lt;/nav&gt;&lt;!-- /.crumbs --&gt;
              &lt;/div&gt;
          &lt;/header&gt;&lt;!-- /header --&gt;
  
          &lt;section id="container"&gt;
                  &lt;img src="http://kathykroening.com/wp-content/uploads/2012/11/homebg.jpg" alt="" class="pagebg"&gt;
  
  
  
          &lt;div class="inner"&gt;
              &lt;div class="content"&gt;
  
                  &lt;p&gt;Before color, fabric and furnishing, there’s interior architectural design – the essential space planning that literally makes room for your ultimate vision.&lt;/p&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="caption"&gt;
              &lt;h2&gt;Interior Architectural Design&lt;/h2&gt;
          &lt;/div&gt;&lt;!-- /.caption --&gt;
                  &lt;/section&gt;&lt;!-- /#container --&gt;
  
  
  
      &lt;/div&gt;&lt;!-- /#wrapper --&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>* { margin: 0; padding: 0;}
  html { height: 100%; overflow: auto;}
  body { font-family: 'Questrial', sans-serif; font-size: 12/13px; line-height: 115%; }
  a { text-decoration: none; outline: none !important;}
  
  .alignleft { float: left;}
  .alignright { float: right;}
  
  #wrapper { width: 1024px; margin: 0 auto; position: relative; display: block;}
  .inner { width: 900px; margin: 0 auto; position: relative; }
  
  header { height: 215px; overflow: hidden;}
  .toph { height: 150px; line-height: 150px; text-align: center;}
  .logo a { display: inline-block; width: 360px; height: 96px; background: url('assets/img/logo.png') no-repeat; text-indent: -9999px; position: relative; line-height: 96px;}
  .bottomh { height: 65px;}
  header ul { list-style: none;}
  header nav { clear: both; display: inline-block; width: 100%; position: relative;}
  header nav li { float: left;}
  header nav li a { text-transform: uppercase; font-size: 14px; }
  nav.main { height: 35px; background: url('assets/img/mainnavbg.jpg') no-repeat; line-height: 35px;}
  nav.main li { padding: 0 45px;}
  nav li.first { padding-left: 0 !important; border-left: 0 !important;}
  nav li.last { padding-right: 0 !important; border-right: 0 !important;}
  nav.main li.last { float: right;}
  nav.main a { color: #fff;}
  nav.main a:hover,
  nav.main li.current_page_item a,
  nav.main li.current-page-ancestor a { border-bottom: 1px solid #fff; padding-bottom: 3px;}
  nav.crumbs a { color: #726658; font-size: 13px;}
  nav.crumbs ul { height: 13px; line-height: 13px; padding: 3px 0;}
  nav.crumbs a:hover,
  nav.crumbs li.current_page_item a { color: #90492d;}
  nav.crumbs li {  padding: 0 10px; border-right: 1px solid #e1dedb; border-left: 1px solid #716558;}
  
  footer { margin-top: 5px; height: 30px; line-height: 30px; clear: both; font-size: 12px; color: #797979; }
  
  section#container { height: 550px; position: relative; display: block;}
  .pagebg { position: absolute; z-index: 1; }
  .pagebg.block { right: 45px;}
  .content {  z-index: 999; position: absolute; left: -50px; width: 250px; height: 470px; background: rgba(0,0,0,0.8); color: #fff; padding: 40px 35px;}
  .scroller { height: 500px; overflow: auto; width: 250px;}
  .content.block { background: #262223;}
  .content h2 { font-weight: 100; text-transform: uppercase; font-size: 21px; margin-bottom: 10px;}
  .content h3 { text-transform: uppercase; font-size: 15px; font-weight: 100; padding: 3px 5px; background: #58595b; display: inline-block; margin-bottom: 10px;}
  .content p { font-size: 14px; padding-bottom: 10px; }
  .content a { color: inherit; text-decoration: underline; }
  .content ul { list-style-position: inside;}
  
  body.home .content p { font-size: 19px; line-height: 150%;}
  .caption { background: rgba(255,255,255,.8); padding: 10px 5px; position: absolute; bottom: 20px; width: 100%; text-transform: uppercase; z-index: 9999;}
  .caption h2 { width: 875px; margin: 0 auto; font-size: 17px; letter-spacing: 20px; font-weight: 100;}
  </code></pre>