title: Bootstrap from Twitter IE7 bug
body: <p>I found a bug in a site that i have created in IE7. </p>
  
  <p>URL of the site: <a href="http://moldipaints-dokkum.nl/productcontroller/getProductList/19" rel="noreferrer">http://moldipaints-dokkum.nl/productcontroller/getProductList/19</a> </p>
  
  <p>When opening a product in IE7 the bootstrap modal is behind the page and the grey overlay is on top. and images are on top of modal.</p>
  
  <p>I changed the following:</p>
  
  <p>css position : relative/absolute/fixed (Only modal is not showing correctly)</p>
  
  <p>css z-index : (Not any difference) </p>
  
  <p>Potential fix Twitter (Github) ; <a href="http://jsfiddle.net/ATeaH/8/" rel="noreferrer">http://jsfiddle.net/ATeaH/8/</a></p>
  
  <p>None of these are correct. What can i do to make this work?</p>
  
  <p><strong>Update Code from project</strong></p>
  
  <p>Page rendering</p>
  
  <pre><code>    &lt;?php
      if(isset($productByType)){
          $countwidth = (count($productByType) / 2)*260+100;
      }?&gt;
  
  
  
      &lt;div class="productView"&gt;
          &lt;div class="aligndiv"&gt;
             &lt;div class="productcenter"&gt;
                 &lt;div class="productenview"&gt;
                     &lt;div class="productcontainer" style="width:&lt;?=@$countwidth?&gt;px;" &gt;
                         &lt;?php
                         if(!empty($productByType)){
                         for($i=0;$i &lt; count($productByType); $i++){
  
                         $id = $productByType[$i]['id'];
                         $title = $productByType[$i]['title'];
                         $img = base_url('/img/producten/'.$productByType[$i]["img"]);
  
                         if($i % 2 == 0){
                            echo '&lt;div class="seperatorforproduct"&gt;';
                         //0,2,4,6,8
                         }
  
                      echo '&lt;div class="button btnstyle"&gt;';
                      echo '&lt;div class="imgbtn"&gt;';    
                      //  &lt;!-- afbeelding --&gt;
                      echo '&lt;img src="'.$img.'" title="'.$title.'" alt="'.$title.'" data-toggle="modal" href="#modal'.$id.'" /&gt;';
                      echo '&lt;/div&gt;';  
                      echo '&lt;div class="txtbtn txtstyle"&gt;';   
                      echo '&lt;a class="btn" data-toggle="modal" href="#modal'.$id.'" &gt;'.$title.'&lt;/a&gt;';
                      echo '&lt;/div&gt;';
                      echo '&lt;/div&gt;';
                      ?&gt;
                      &lt;div class="modal" style="display:none;" id="modal&lt;?=$id?&gt;"&gt;
                          &lt;div class="modal-header"&gt;
                              &lt;a class="close" data-dismiss="modal"&gt;&amp;times;&lt;/a&gt;
                              &lt;h2&gt;&lt;?=$title?&gt;&lt;/h2&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-body"&gt;
                              &lt;div class="modal-left"&gt;
                              &lt;img src="&lt;?=$img?&gt;" title="&lt;?=$title?&gt;" alt="&lt;?=$title?&gt;" /&gt;
                              &lt;/div&gt;
                              &lt;div class="modal-right"&gt;
                              &lt;p&gt;&lt;?=$productByType[$i]['info']?&gt;&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
                              Neem contact op met Moldipaints-Dokkum.nl voor meer informatie, telefoonnummer: 0519-297409
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;?php
                      if($i % 2 == 1 || $i == count($productByType)){
                          // 0,3,6,9,12
                          echo '&lt;/div&gt;';
                      }
                  }      
              }?&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS Bootstrap</p>
  
  <pre><code>    .modal-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        background-color: #000000;
      }
      .modal {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1000;
        min-height: 500px;
        width: 700px;
        margin: -275px -380px;
        background-color: #ffffff;
        border: 1px solid #999;
        border: 1px solid rgba(0, 0, 0, 0.3);
        *border: 1px solid #999;
        /* IE6-7 */
  
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding-box;
        background-clip: padding-box;
        }
  </code></pre>
  
  <p>CSS style project</p>
  
  <pre><code>    /*   Producten   */
      .productView{position:absolute; width:100%; height:700px; top:50px; margin:auto;}
      .aligndiv{position:relative; width:1024px; margin:auto;}
      .productcenter{width:1024px; height:500px; margin:auto;}
      .productenview{position:relative; width:480px; height: 600px; overflow-x:scroll; overflow-y:hidden; float:left; left:10%; margin:auto; margin-right:300px}
      .productcontainer{height: 400px; margin-top:90px; z-index:0;}
      .productmenu{position:absolute; width:300px; top:100px; right:5%; z-index:0;}
      .seperatorforproduct{position:relative; width:240px; height:480px; float:left;}
  </code></pre>
  
  <p>Thank you in advance</p>